Layout types and position settings

In the Design view, the right panel sets how a grid scene is laid out: how rows and columns arrange their contents, how wide and tall items are, and whether an item is placed freely or sticks while scrolling. Select a row, column or element on the page to see its settings: the Layout block sets how a row or column arranges its contents, and the Position block sets how the selected item sits in the row or column around it. The Grid container block sets the width of the whole grid.

For backgrounds, see Backgrounds in a grid scene.

Layout types in a grid scene

Every row and column in a grid scene has a layout type. The layout type decides how the contents of the row or column are arranged:

• Page grid — the contents line up with the columns of the page grid, so they align with the rest of the page. This is the default; use it unless you need something else.
• Custom grid — the row or column has its own column grid, with its own number of columns and gaps. Use it when a row needs a different number of columns than the page, such as five logos side by side.
• Auto Layout — the contents line up one after another, horizontally or vertically, with a set gap. Use it when items should sit next to each other at their own size, such as a row of buttons.

When you select a row or column, its layout type is shown as a label on its edge.

Changing the layout type of a row or column

To change the layout type of a row or column in the Design view:

1. Select the row or column.
2. In the right panel, go to the Layout row or Layout column block.
3. Choose Page grid, Custom grid or Auto Layout.

Once a row or column uses Custom grid or Auto Layout, the rows and columns inside it can't be set to Page grid.

Setting up a Custom grid

A row or column with the layout type Custom grid has its own column grid. To set it up:

1. Select the row or column.
2. In the Layout row or Layout column block, set:
3. • Columns — the number of columns in this grid
   • Col gap — the space between the columns
   • Row gap — the space between rows of content

In a row with the layout type Page grid, the column gap comes from the page grid and can't be changed in the row. The panel then shows This gap is inherited from the Page grid and cannot be edited here.

Setting up an Auto Layout

A row or column with the layout type Auto Layout lines its contents up one after another. To set it up:

1. Select the row or column.
2. In the Layout row or Layout column block, set:
3. • the direction: Horizontal or Vertical
   • Gap — the space between the items
   • Align — where the items sit in the row or column
   • Wrap items or Do not wrap items — whether items move to a new line when they don't fit

Seeing where an item sits

The Position block starts with a label for the row or column that holds the selected item, for example In custom grid 6 cols or In autolayout vertical. For an item that follows the page grid, the label reads Select parent. Click the label to select that row or column.

Setting the width of a top-level row

A top-level row is a row placed directly on the page, not inside another row or column. To set how wide it is on the page:

1. Select the top-level row.
2. In the Position block, under Width, choose:
3. • Full width — the row runs from edge to edge of the page
   • Content area — the row is as wide as the centred content area of the grid
   • Medium or Small — the row is narrower than the content area

Setting where the content of a full-width row sits

Inner width sets where the content sits inside a top-level row, for example a row with a full-width background and its text in the centre. To set it:

1. Select the top-level row.
2. In the Layout row block, under Inner width, choose:
3. • Full row — the content uses the full width of the row
   • Content area — the content stays within the centred content area
   • Bleed left or Bleed right — the content runs out to the left or right edge of the page, for example an image that runs to the edge while the text next to it stays in the content area
   • Custom — the content spans the grid columns you choose

Setting the height of an item

To set the height of a row, column or element:

1. Select it.
2. In the Position block, under Height, choose:
3. • Autofit — the height follows the content
   • Fixed — a height you enter
   • Stretch — the item fills the height of the row or column around it
   • Half (50vh) — half the height of the screen
   • Full (100vh) — the full height of the screen, for example for an opening section

You can also drag the bottom edge of a selected item on the page to make it taller.

Setting the width of an item in an Auto Layout

An item inside an Auto Layout row or column doesn't snap to grid columns. To set its width:

1. Select the item.
2. In the Position block, under Width, choose:
3. • Autofit — the width follows the content
   • Fixed — a width you enter
   • Stretch — the item fills the space that is left

Setting the width of the whole grid

The Grid container block sets how wide the grid of the scene is. To open it, select the whole grid: click an empty part of the scene, or select a top-level row and press Esc. Then, in the Grid container block, under Grid settings, choose a width:

• Full width — the grid uses the full page width
• Small — the grid is at most 900 px wide
• Large — the grid is at most 1100 px wide

A smaller grid width keeps text-heavy pages readable on wide screens.

When the grid's settings match none of these, Custom grid is shown. To change the number of columns, the gaps or the grid width yourself, click Customize grid.

Under Vertical align, you choose where the content sits when the scene is taller than its content: Top, Center or Bottom.

Positioning an item freely

In the Design view, you can take an item out of the grid and place it freely inside its row or column, for example a label that overlaps the corner of an image. The other items keep their place, as if the free item wasn't there.

To position an item freely:

1. Select the item.
2. In the Position block, open the position menu. It shows how the item is placed now, such as In grid.
3. Choose free positioning.
4. Drag the item on the page, or set Offset (X and Y) in the Free position settings. Under Align to, choose whether the offset is measured from Its box or from the Container.

Free positioning isn't available for items in a Card list or Card slider, because those rows place their cards themselves.

Making an item sticky

A sticky item stays in view while the page scrolls, within the row or column that holds it:

• a top-level row sticks while the whole page scrolls, such as a navigation bar
• a column sticks while its row scrolls past, such as a sidebar next to a long text
• an element sticks while its column scrolls past

To make an item sticky:

1. Select the item.
2. In the Position block, open the position menu.
3. Turn on Stick on scroll.
4. Under Edge, choose where it sticks: Top, Center or Bottom. Optionally, set an Offset (px) from that edge.

The editor doesn't scroll like a published page, so a sticky item doesn't stick on the canvas. Check it in the preview.

Layout settings in the Build view

In the Build view, layout types, free positioning and sticky items can't be changed. Build users set a section's width, height and placement with the toolbar above it. See Arrange content in the Build view.

Frequently asked questions

What is the difference between Width and Inner width?

Width, in the Position block, sets how wide a top-level row is on the page. Inner width, in the Layout row block, sets where the content sits inside the row. For example, a row with Width set to Full width can have its background run edge to edge, while Inner width set to Content area keeps its text in the centre.

Why can't I set a row back to Page grid?

A row or column inside a Custom grid or Auto Layout row or column can't use Page grid. Only rows and columns that follow the page grid all the way up can be set to Page grid. To use Page grid again, change the layout type of the outer row or column first.

Why can't I change the column gap of a row?

A row with the layout type Page grid takes its column gap from the page grid, so the gap can't be changed in the row. Change the gap of the whole grid with Customize grid in the Grid container block, or set the row to Custom grid to give it its own gap.

Why can't I set the width of a column in the right panel?

Column widths in a grid scene are set on the page, not in the right panel. Drag the divider between two columns, or drag the markers on the edge of a selected column. See Select, move and resize in the Design view.

Is the Custom grid width setting the same as the Custom grid layout type?

No. In the Grid container block, Custom grid means the width of the whole grid matches none of the presets. As a layout type, Custom grid gives one row or column its own column grid.

Updated on: 02/11/2026