Blocks

Blocks » Layout Grid Block

Use the Layout Grid block to align content on your website. This block allows you to define responsive breakpoints, which means you can select how many columns appear side by side on your post or page for both desktop and mobile views.

Table of Contents

Definition of a Layout Grid

A layout grid provides structure and alignment to the contents of a webpage. It contains a number of vertical 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.

In the Layout Grid block, grid lines are grouped together to form columns (1-4), and you can place your content within each of those columns.

Picture of the Layout Grid block
The Layout Grid block with 3 columns

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

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

↑ Table of Contents ↑

Add the Layout Grid Block

To add the Layout Grid block, click on the + Block Inserter icon and search for “layout grid”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /layout on a new line and press enter to quickly add a new Layout Grid block.

Adding a Layout Grid block.

If you have a plugin-enabled site, make sure to activate the Layout Grid plugin at Plugins → Installed Plugins.

For more, visit our detailed instructions on adding blocks.

Setting up the Grid

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

Choosing how many columns to include in the Layout Grid block.
Choose the number of columns you want to start with.

You can change this later from within the Block Settings.

Adding Content to the Grid

Each column in the grid can contain other blocks. Click the + Block Inserter icon for each column, then search for the block you want to add.

Using the + Block Inserter icon to add blocks to individual columns in the Layout Grid block.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear:

Layout Grid block toolbar options.

The Layout Grid block has the following options in its toolbar:

  • Change block type or style.
  • Drag the block.
  • Move the block up or down.
  • Change the block’s horizontal alignment or width.
  • Responsive breakpoints for desktop, tablet, and mobile.
  • Change the block’s vertical alignment.
  • Additional options.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click the ⚙️ icon to open the block settings
Layout Grid block sidebar settings.
Layout

Use this to change the number of columns contained within your Layout Grid block. If you decrease the number of columns by one, the final column (and all its content) is removed.

Responsive Breakpoints

Customize the Desktop, Tablet, and Mobile views by clicking their corresponding buttons.

Offset

This determines how many grid lines a column skips, to add spacing away from the previous column or from the start of the layout grid.

Span

This is the total number of grid lines that make up the full width of a single column.

Gutter

The grid gutter is the space between any two columns within the grid.

Selecting No gutter will remove all gutters, including the first and last.

When the gutter size has any value other than No gutter, you can toggle off the button for Add end gutters. This will remove the gutters on the extreme left and right of the grid to make it fill up the entire width of the page.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.
Column Settings

Each column within the Layout Grid block has its own settings where you can change the background color and padding. This will only affect the individual column selected.

Editing the padding and background color options for individual columns within the Layout Grid Block.
Resizing the Grid

As a rule, you can resize the columns within the layout grid. However, the sum of all the Offset and Span values for each column within a row must not exceed the total number of available grid lines for the viewing device.

For example, on a desktop device (12 grid lines), individual columns within 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.

This will ensure that your columns do not overlap and can sometimes mean that you’re unable to increase an offset or span value in one place without reducing another first.

Resizing the Grid Using Drag Handles

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

Drag handles for resizing columns in the Layout Grid block.
Resizing the Grid Using the Block Settings

You can also resize columns in a layout grid by changing the Offset and Span values directly within the block settings in the sidebar.

Responsive breakpoints for the Layout Grid block.

These are automatically adjusted when using the drag handles.

Resizing the Grid on Mobile Devices

When looking to resize the grid and adjust how columns appear on mobile and tablet devices, keep in mind that the sum of all offset and span values for the individual columns should not exceed 8 grid lines for tablet devices and 4 grid lines for mobile devices.

In the examples below, we set the columns to have a span of 2 and an offset of 0 to display two columns on mobile and 4 columns on tablet respectively.

How to display two columns on mobile using the Layout Grid block.
How to display four columns on tablet using the Layout Grid block.

Not quite what you're looking for?

Get Help