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 the 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.
Grid Items with Different Styles
If you are building a layout with grid items that have different styles as the example below, then starting with one of the preset grid layout (50/50, 33/33/33 etc) would be a good starting point.
In the example above, the two Containers Blocks in the grid have different content inside:
– The left container only has a background image added.
– The right container has two Headline blocks and a Buttons block added.
Grid Items with Same or Similar Styles
If you are building a layout with grid items that have the same or similar styles as this example:
Then start with the full grid and change the container width to 25%:
Once you finish building the first grid item, click the plus icon to duplicate the grid item and edit the content.
Adding More Grid Items
You can add as many grid items within a grid block/wrapper as you wish by clicking the plus icon. The items will wrap if there is no more space in the current row:
You can also set some of the grid items to have different container width:
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.
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.
An HTML anchor (or ID) can be useful for targeting specific containers with CSS, or linking to specific containers with an anchor..
Additional CSS Classes
Add your own custom CSS classes to the container element.
Custom Attributes (Pro Feature)
Apply any custom data-* attributes to the headline