The Row Layout Block greatly improves the column functionality within the new blocks editor. 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 the format of your columns:
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, set the height, width, and container in the structure settings :
Mobile and Tablet Settings
The Row Layout Block also has options for how to display on tablet and mobile browsers.
Tablet settings allow you to adjust your row layout when viewed in a tablet:
For mobile, you can set both the row layout and the amount of padding you want between your rows:
Column Settings
The row layout block also allows for customization of each individual column. By selecting the column within your row layout, you can adjust the settings individual of all other columns.
To access your column settings, first select the column you wish to edit:
Once the column is selected, you begin making edits to the settings:
Continue editing your columns until you’re happy with the layout. If you have trouble selecting blocks, don’t forget about the breadcrumb feature of the blocks editor. It can help immensely:
