Grid block

Go back to the list of Blocks

Grid block is one of the container blocks that can be used to organize multiple blocks and adjust the height, width, and position of all blocks inside the container. As a container block, it’s possible to transform a Grid block into a Group, Row or Stack block without changing the content of the block.

Click the block inserter (+) icon to open the block inserter pop-up window and search for the Grid block. You can also use the keyboard shortcut /grid to quickly insert a Grid block.

Detailed instructions on adding blocks can be found here.

Block toolbar

To view the block toolbar, click on the block, and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Grid block shows the following buttons in the block toolbar:

• Transform to
• Moving handles
• Align
• Options

Transform to

Click on the “Transform” button to convert the Grid block into Group, Row, Stack, Cover or Columns blocks.  

Moving handles

The dotted icons can be used to drag and drop a block to the place of your choosing. The up and down arrow icons can be used to shift a block up and down in your document.

Get more information about moving a block within the editor.

Align

Use the change alignment tool to change the width of the Grid block. The following is a list of the block width options:

• None
• Wide width
• Full width

Options

The Options button on a block toolbar gives you more features to customize the block. 

Read about these and other settings.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.

Click Group, Row, Stack button in the Block Settings to transform the Grid block to each block. 

Layout

In the Grid block’s Layout settings, you can control how many columns appear in each row.

• Max. columns – Sets the maximum number of columns the grid can show in one row.
• Min. column width – Sets the smallest width each column can be before the grid wraps to fewer columns per row.

Use both settings when you want to cap the number of columns and control when the grid wraps to fewer columns.

For example, if Max. columns is 4 and Min. column width is 12rem, the grid can show 4 columns when there is enough space. On narrower screens, it may wrap to 3, 2, or 1 column.

Position

The position setting is only available when the Grid block is located at the root-level. The drop-down menu has two options: Default and Sticky. If the Sticky option is selected, the Grid block will remain at the top of the window when you scroll down the page.

Advanced

The Grid block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), HTML element, Styles, and Allowed blocks.

Learn more about advanced settings

Block styles

Click Styles icon in the block settings sidebar to access the design settings.

Color

The Grid block provides Color settings options to change the text, background, and link colors.

For details, refer to this support article: Color settings overview

Background image

The Grid block provides Background Image settings to display behind the block’s content:

1. Click Add background image under the Background Image in the block’s Styles.
2. Select image from Media Library or Upload an image.
3. You can set Top and/or Left position, and Size from Cover, Contain and Tile.

Typography

The Grid block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Dimensions

The Grid block provides dimension settings options to add padding, margin, and block spacing.

For details, refer to this support article: Dimension settings overview

Border

The Grid block provides border settings options to add border color, width, and radius.

For details refer to this support article: Border settings overview