How To Use The Layout Grid Block By Automattic

Earlier, I’d written about the GenerateBlocks plugin for advanced layouts, and it’s one I use extensively on my site. But Automattic – the creator of WordPress – has their own version called the “Layout Grid Block”. While it’s not as fully featured at GenerateBlocks, it’s quite impressive, and I feel more people should consider one for their page layout. Here’s how to use it.

Using the Layout Grid Block

First, download and install the Layout Grid Block from the WordPress plugin store. After activating it, you can select the block from the Gutenberg editor like any other block. The first thing you have to do is choose the number of columns. You can choose up to four, as shown in this screenshot.

Once you have the layout in front of you, you can start editing the columns by choosing the blocks you want to place inside. If it’s just plain text, you can use a paragraph block. If it’s an image, you can choose an image, and so on.

So far, it’s not that different from the ordinary column block that’s included with WordPress by default. So what makes the Layout Grid Block different?

Setting the Breakpoints for Mobile Devices

The first benefit of the Layout Grid Block is that it lets you change how your block adapts to mobile devices by modifying the positioning and size of the columns. For example, if you want to prevent the second column from wrapping to the next line on tablets, you can just reduce the “span” of the first column to reduce its size, as shown here:

In this screenshot, I’ve reduced the “span” element of the first column to 3 instead of 4. This reduces the size it occupies and gives more space for the second column – the image – to appear on the same line instead of wrapping it to the next one. You can repeat this for all the columns until you’ve achieved a good compromise that looks good on all kinds of devices.

So this is the first benefit of the Layout Grid Block – the ability to adjust the appearance to accommodate different screen sizes.

Apply Padding to Columns

The second benefit of the Layout Grid Block is that you can apply padding to the various columns, as shown here:

This lets you position the elements precisely where you want them to ensure they don’t run into each other. The result is much cleaner than it would have been had you used the columns block instead. Finally, you can also use the “Gutter” setting for the Layout Grid Block to change the margins between columns – called “Gutters” – as well as end gutters, which act as margins for the entire set of columns.

Limitations of the Layout Grid Block

Useful as it is, the Layout Grid Block has a lot of limitations. For one, you can’t granularly control the margin or the paddings for each direction of the columns or the entire block. It’s a single setting for all four sides. There’s also no styling available for including borders.

But perhaps the biggest limitation is the inability to control the width of individual columns in the grid. This makes it impractical for complex UI elements. The Layout Grid Block’s use-cause is a framework for large page design decisions – not as a UI builder for intricate elements such as Call to Action (CTA) blocks or buttons. For this reason, I use the GenerateBlocks plugin on my site WP-Tweaks.com instead of the Layout Grid Block.

However, this plugin is easy to use and get started if you don’t have any experience designing layouts, so it’s perfect for beginners. Once you start demanding more power, you can migrate the GenerateBlocks plugin!