Blocks

Blocks »Layout Grid Block

Use the Layout Grid block to align blocks to a global grid. With support for responsive breakpoints, this block makes it easy to create layouts that share consistent vertical grid lines and put content in columns.

Picture of the Layout Grid block
The Layout Grid block

Table of Contents

Add a Layout Grid Block

You can add the Layout Grid block by clicking the Add Block button and searching for Layout Grid in the layout section. Alternatively, you can type /layout as quick method.

For more, visit our detailed instructions on adding blocks.

Note that some features of this block are dependent on your site’s theme fully supporting the block editor.


↑ Table of Contents ↑

Definition of a Layout Grid

A grid is a mechanism for designing a layout. It contains a number of grid lines determined by the viewing device (the responsive breakpoint):

  • 12 grid lines for desktop devices
  • 8 grid lines for tablet devices
  • 4 grid lines for mobile devices

The layout grid contains a number (1-4) of columns, and each column contains the content you want placed on the grid.

Columns can span across multiple grid lines (shown with dotted lines), and can be offset from each other. This is your grid layout. Different settings can be used for each viewing device.

It is common on smaller devices (tablet and mobile) that a layout will be spread over multiple rows. This is automatically enabled when you switch to tablet or mobile views, although it can be overridden by directly changing the grid values.

Responsive breakpoints are an advanced topic. You can still use the Layout Grid without worrying about these, and the grid will use the default breakpoints.


↑ Table of Contents ↑

Setting up the Grid

When you first add a Layout Grid block, you will be prompted to pick the number of columns:

Image showing how to choose the number of columns you want to start with
Choose the number of columns you want to start with

You can change this later from the Block Settings sidebar.


↑ Table of Contents ↑

Adding Content to the Grid

Each column in the grid can contain other blocks. You can add content by clicking the + icon and picking a block.


↑ Table of Contents ↑

Resizing the grid

You can resize the columns in a Layout Grid in one of two ways:

  • Use the on-screen drag handles
  • Use the Block Settings sidebar

The currently selected responsive breakpoint is shown at the bottom of the Layout Grid block.

Using the block settings sidebar you can switch between desktop, tablet, and mobile breakpoints by clicking the appropriate buttons.

Note that the overall editor will not change to reflect the chosen breakpoint.

Resizing the grid using drag handles

Each column on your grid will have a left and right blue circle. These are drag handles and if you click and pull to the left or right, the block will resize.

The Layout Grid will prevent you from resizing outside the bounds of the grid, and it may be that you need to adjust other columns to make space.

It is not possible to use the drag handles to resize the grid across different rows.

Resizing the grid using the block settings

As well as the drag handles you can directly modify the grid layout using the Block Settings sidebar.

Every block has additional options in the editor sidebar, as well as the options found in the block toolbar. If you do not see the sidebar click the ‘gear’ icon next to the Publish button.

You can directly modify the values for each column:

  • Offset – how many grid lines this column is offset from the previous (or start)
  • Span – how many grid lines this columns spans

These are automatically adjusted when using the drag handles.


↑ Table of Contents ↑

Multiple Rows

Tablet and mobile layouts can have multiple rows.

You can resize columns within each row using the drag handles. If you wish to move columns across rows then you will need to use the block settings sidebar.

↑ Table of Contents ↑

Grid Rules

Even a grid needs rules! Fortunately there is only one rule here and that is that the total of all the offset and span values for each column within a row must not exceed the number of grid lines for the viewing device.

For example, on a desktop device (12 grid lines), a three column layout can each span 4 grid lines with no offsets, or span 3 grid lines with 1 offset each, or one column can span 10 grid lines and the other two columns span 1 each.

It’s up to you how to arrange the grid, and the rule will ensure that your columns do not wrap. This may mean you are prevented from certain combinations of offsets and spans (particularly when dealing with multiple rows), and you will need to pick values that obey the grid rule.

↑ Table of Contents ↑

Gutter

You can adjust the grid gutter (the space between columns within the grid) by changing the gutter settings:

Image showing the gutter settings
Gutter settings

The gutter size affects the space between all columns. Selecting a gutter size of ‘none’ will remove all gutters, including the first and last.

When the gutter size any value other than ‘none’ then you can additionally remove the gutter on the left and right of the grid. This allows you to align your grid to the edges of your page.


↑ Table of Contents ↑

Padding and Colors

Each grid column has its own settings, accessed in a similar way to the block settings. From here you can add a background color and padding. This will only affect the individual column.

Not quite what you're looking for?

Get Help