How to Build an Attractive 2×2 Block Grid for Your Website (WordPress 6.2)

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.

screencapture-localhost-10003-rejilla-2x2-2023-03-22-19_45_18-885x1024 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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).

Captura-de-pantalla-2023-03-22-a-las-20.03.07-1024x619 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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).

Captura-de-pantalla-2023-03-22-a-las-20.08.58-1024x619 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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.

Captura-de-pantalla-2023-03-22-a-las-20.14.08-1024x660 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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).

Captura-de-pantalla-2023-03-22-a-las-20.23.49-1024x660 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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).

Captura-de-pantalla-2023-03-22-a-las-20.26.17-1024x660 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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.

Captura-de-pantalla-2023-03-22-a-las-20.32.15-1024x667 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

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.

Other details

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.

Exercise

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.

screencapture-localhost-10003-rejilla-2x2-2023-03-22-21_01_02-885x1024 How to Build an Attractive 2x2 Block Grid for Your Website (WordPress 6.2)

Conclusions

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.

Comparte en Mastodon

Icono de Mastodon


Posted

in

by

Tags:

Likes, Bookmarks, and Reposts

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

This site uses Akismet to reduce spam. Learn how your comment data is processed.