We are going to see in this post how to build a layout in the form of a 2×2 grid (2 rows and 2 columns) in WordPress 6.2. For this we will use the Group and Columns blocks.
The following image shows the design we want to achieve.
This is pretty basic, but it’s a starting point for any blocky layout you want to implement in the WordPress 6.2 editor (post or site).
Group block (container) and set layout width
The first thing would be to insert a group block as a container for our layout. This is not strictly necessary but it is recommended in order to set some design parameters; such as -for example- the space between the rows (horizontal gap).
The group block also allows us to set the width of the layout. This question could vary depending on the theme you have active. You simply have to change the alignment of the group block, choosing Full Width or Wide Width (see image below).
Alignment, in the group block, is changed by pointing to the block and clicking the button on the top button screen.
However, for you to see the width change, it is normal to deactivate the option “Inner blocks use content width” in the configuration of the group block in the “Layout” section (see following image).
Background color and separation between rows, within the group block
Next, we can set the background color (optional) for the group block and, considering that the design contains several rows, the separation (gap) between them. Also, we might want to add padding inside the container block. To do this, we will go to the group block configuration and set these parameters (Color -background-, Dimensions -padding and block spacing-). See the following image where no background color or fill has been set. Only a space between rows (block spacing) of 1 has been configured.
Two column blocks inside the group block
The 2×2 structure can be implemented by inserting two column blocks inside the group block (see image below).
If you activate the list view (highly recommended) you will see the structure assembled after the insertion of the two blocks of columns, with two columns in each of them.
In the configuration of the block of columns is where the separation between the two columns (block spacing) of 1 is established (see following image).
Naturally, this space is optional, but it should coincide with the value of the block spacing imposed in the group block. Thus the separation between the cells of the grid is homogeneous.
Background color and padding in each column block
Next is to apply a background color and fill, if preferred, to all four columns of the layout.
In the following image you can see the configuration of one of the columns: Color (Background) and Dimensions (Padding 4). We will repeat this configuration, changing the background color if we prefer.
Insert content in each column
Finally, we will insert blocks inside each column depending on the content we want to add. In this example, we have inserted a paragraph block (with a lore ipsum). Note that the lore ipsum text is displayed according to the padding configured.
If we had put a background color in the group block, the spaces between the four cells would look that color.
We could also have padding all four sides in the group block, and then the grid would look indented on those four sides within the group block.
Modify the design that we have built in this post to achieve the following (see image). Of course, use the image you want. But keep in mind its dimensions because you may have to adjust them in the image block settings, so that the design is displayed without the vertical gap between columns, even if you have set said gap (block spacing) to 0.
We have implemented a very basic structure (2×2 cell grid) using a method that can be used to scale it and build more complex layouts that even fill the entire page.
We see, how WordPress 6.2 allows -at the block level- to build any design with any complexity, starting from something very simple such as a group block with two column blocks inside.
We have provided you in this post, step by step, the method so that you can design what you want starting from the container group block and as many column blocks inside as you need.