Blocks

Blocks »Layout Grid Block

The Grid block aims to make it easy to create layouts that share consistent vertical grid lines across a post or page, and allows you to put content in columns.

A grid contains 1 to 4 columns that can be sized and positioned across 12 vertical grid lines. There are options to provide specific layouts for tablet (8 vertical grid lines) and mobile (4 vertical grid lines).

Optional background colours and padding can be added for emphasis.

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

Detailed instructions on adding blocks can be found here.

What is a layout grid?

A grid is a mechanism for designing a layout, and 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, and 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 defaults.

↑ 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:

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.

↑ Table of Contents ↑

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.

↑ Table of Contents ↑

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 specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar click the ‘cog’ 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 ↑

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