Rows, columns and elements

A grid scene is built from rows, columns and elements. Rows run across the page and stack from top to bottom. A row holds elements directly, or holds columns that sit side by side. Columns hold elements. Because content sits in rows and columns, the editor can rearrange it for a small screen: the mobile version is generated from it automatically.

Rows in a grid scene

A row is a horizontal band across a grid scene. Rows stack from top to bottom, and the scene grows taller with every row you add.

A row holds one of two things:

• one or more elements, placed directly in the row
• two or more columns, to put content side by side

In the Build view, a row at the top level of the page is called a section.

Columns in a grid scene

A column is a vertical slot inside a row. Columns sit side by side and together fill the row's width. Each column holds its own elements, stacked from top to bottom.

In the Design view, a column can also hold a row of its own, to place content side by side inside a column. In the Build view this is not possible: a column holds elements only.

Elements in a grid scene

An element is a piece of content, such as a text, heading, image, video or button. In a grid scene, every element sits in a row or in a column. Elements follow the flow of the page: there is no free x/y position.

For the elements you can add, see Add elements and building blocks.

Automatic rows and columns

You don't need to create rows and columns before adding content. They are created when you place content:

• An element placed on the page gets its own row, across the full width.
• An element placed beside another element sits next to it: in the free grid columns beside it if there is room, otherwise the space is split into columns.
• A building block, such as one from Basic layouts, adds a ready-made row, often with columns already in it.

For how to add content, see Add elements and building blocks.

The page grid

Every grid scene has a page grid: a set of columns that content lines up with. By default the page grid has 12 columns on desktop and 6 on mobile. Content that follows the page grid snaps to these grid columns, so its width is a number of grid columns.

In the Design view, you can see the grid lines when you hover over the scene. To keep them visible, see Grid scene settings.

Layout types of rows and columns

Every row and column has a layout type that decides how its contents are arranged:

• Page grid — the contents follow the page grid. This is the default.
• Custom grid — the row or column has its own column grid.
• Auto Layout — the contents line up one after another, horizontally or vertically, with a set gap.

When you select a row or column, its layout type is shown as a label on its edge. For how to change it, see Layout types and position settings.

In the Build view, layout types can't be changed.

Frequently asked questions

Why does my element take up the full width of the page?

An element placed on its own in a grid scene gets its own row, which runs across the full width of the page. To put elements side by side, place an element beside another one, or add a building block with columns. See Add elements and building blocks.

What is the difference between a row and a section?

A section is a row at the top level of the page. The Build view calls these rows sections. The Design view calls every row a row.

Can I put columns inside a column?

In the Design view, yes: a column can hold a row, and that row can hold columns. In the Build view, no: nested columns are not allowed, and a column holds elements only.

Updated on: 29/10/2026