The Grid Block allows you to build advanced columns in your content. It uses flexbox, and even allows you to wrap the columns on multiple lines, meaning you can keep adding columns forever to build multi-line grids.
When you add a Grid Block, the Container Block is automatically inserted as your grid column. This gives you all of the power behind our Container Block directly inside your Grid.
Inserting a Grid Block
First, make sure you’ve already added a Container Block. It’s good practice to wrap your grid in a surrounding Container, as it gives you more options moving forward.
Once you choose the Grid Block in the editor, you’ll be given a choice of layout presets.
Selecting one of these presets will add that layout to the editor for you.
If you don’t want to start with a layout, you can click the Add Grid Item icon.
As you’ll see, you now have a collection of Container Blocks if you chose a layout, or a single Container Block if you clicked the Add Grid Item icon.
Adding More Grid Items
If you need to add more grid items to your grid, you have two options.
The first option is the Duplicate Grid Item icon in the block controls.
The Duplicate Grid Item icon can be found in the block controls for each grid item. Clicking this icon will duplicate the block that you’re currently editing. The new block will be sent to the end of the line.
The second option for adding more grid items can be found in the Grid block controls.
Clicking the Add Grid Item icon will add a new grid item to your grid, instead of duplicating any of the existing grid items.
We can add as many grid items to a grid as we need, there is no limit. The items will wrap if there is no more space in the current row.
For example, let’s add two more grid items, and set their widths to 50% each.
I can even add three more items, and give them a 33.33% width to get the below result.
We can keep doing this all day to achieve any kind of layout.
Editing Our Grid Block
When we chose our layout from the available templates, we were directly right into our inner Container Blocks. This actually skipped the options we have available in the Grid Block itself.
To open the Grid Block, we can use the Block Navigation, or you can use the Select Grid Parent icon in the block controls of the grid item.
Now that we’re inside the Grid block, we can use its options.
The horizontal gap option allows us to control the horizontal spacing between our columns.
The vertical gap option allows us to control the vertical spacing between our columns if we choose to span multiple rows.
This option will add spacing to the bottom of every single grid item you add. In most cases, the last row of grid items won’t require this spacing. That’s where the Remove Vertical Gap option inside the Container Block comes into play.
This option will vertically align the columns in your grid. For example, if you want all of your grid items to align in the middle, you would choose Center.
This will stop the grid items from being equal heights, and it will override the Vertical Alignment setting inside the Container Block.
The horizontal alignment option will horizontally align your grid items. This is useful when your grid items aren’t wide enough to fill their container.