The default Gutenberg columns aren’t very impressive at the moment, but thankfully, ours are! With the Row Layout Block, you’ll be able to easily create responsive layouts for your pages and posts.
- To get started using the row layout block, select it from the add block menu:
- After you select the row layout block, set how you’d like the columns to appear:
- Once you’ve selected your desired layout, then start adding blocks to build your content:
- Continue adding blocks until you’re happy with your layout:
*If using a two column layout, you can adjust the spacing of your columns by dragging the divider between them. This feature is only available with a two column row layout:
Row Layout Settings
For each row layout block, you also have a sidebar full of layout and design options.
- When the row layout block is selected, you should see options for adjusting the number of columns, the layout of your columns, and the column gutter (spacing between columns). Below that you should see options for adding backgrounds and padding adjustments to your block:
- The padding and margin settings will allow you to adjust the blocks spacing in relation to the other blocks on your page:
- Following your spacing settings, you can move onto setting a background and background overlay for your entire row layout block:
- Next, set the default text and link colors for your row layout block:
- Finally, you can set the main structure of the row:
Mobile and Tablet Settings
The Row Layout Block also has options for how to display on tablet and mobile browsers.