Layouts are the fundamental structures containing a grid which controls the content structure within.

In this guide:

Overview

Nearly all content is wrapped in a layout. Most commonly, layouts are created automatically as elements like media and text are added. They are the structure around columns, inherently span the width of the window, control the grid, have spacing, and margins.

Fundamentals

Layouts are created when adding other elements.
Layouts encapsulate columns.
Layout settings such as grid count can change between breakpoints.
Layouts will wrap if the contents within exceed the grid count.

<aside> 💡

Note: Rows have been replaced with Layouts. If you are familiar with rows in pre 12.0 releases, they are the same but with added functionality.

</aside>

Grid

The grid of a layout is what controls the number of columns within. When the number of columns within a layout exceeds the grid count, it will wrap to the next line. This is foundational to mobile optimization, allowing columns to be side-by-side on desktop but then stack vertically on mobile.

Pack columns

When changing the grid count, columns will stay wrapped. They can be repositioned in body, but selecting the ‘Pack columns’ button beside the grid input quickly repositions them.

Tip

For tile based designs like a grid of images, it’s suggested to use a grid with less columns so the content wraps fluidly. Set up this way, you can add, remove, and reposition columns quickly.

Dig deeper in Grid

Default grid settings

While every layout’s grid count can be set individually, they are also controlled by a default grid setting. This default is what new layout grids will be set to. If this is overridden on a specific layout, it can be reset to the grid default.

How to change default grid settings

Within the editor, select the breakpoint dropdown from the top bar
From the dropdown, select Grid settings
The settings will show in the right sidebar, and will control each breakpoint’s defaults

Overrides

All layout’s grids can be modified to override the default grid. This is helpful when fine-tuning. Overridden layout grids can be reset by selecting the rotating arrow icon in the grid settings group.

Settings in tablet and mobile breakpoints that differ from desktop will show an indicator
Selecting the rotating arrow icon on a settings group will reset it to match desktop
Visibility of layers can differ between breakpoints

Dig deeper in Grid

Columns

Columns are the child containing layer within layouts which encapsulate the content elements such as media or text.

Basics

Contents within columns vertically stack
If the number of columns exceeds the grid count in the layout they’re in, they will wrap below.
Columns can be styled with fills, spacing, corner radius, and more

Related guides

Release 12.0

Grid

Responsive Optimizations