Select, move and resize in the Design view

Grid mode is in beta and available in selected accounts only.

In the Design view, you arrange a grid scene directly on the page. You click to select rows, columns and elements, drag them to move them, and drag handles to change widths, heights and spacing. Content snaps to the grid columns: there is no free position on the page.

Selecting content in the Design view

To select content in a grid scene in the Design view:

Click a row, column or element to select it.
Shift+click to add another item to the selection.
Drag a box over an empty part of the page to select several items at once.

The settings of the selected item open in the right panel.

Selecting the row or column around an item

To select the row or column that holds the selected item, press Esc or the ↑ key. You can also right-click the item and choose Select.

Other keys for moving the selection:

↓ selects the first item inside the selected row or column.
Tab selects the next item at the same level. Shift+Tab selects the previous one.

Moving content by dragging

To move a row, column or element to another place on the page:

Select it. A drag handle appears on it.
Drag the drag handle to the new spot. A blue drop line shows where it will land.
Release to drop it.

Where you drop decides how the content is placed:

Above or below other content — the content gets its own row.
Beside an element — the content is placed next to it: in the free grid columns beside it if there is room, otherwise the space is split into columns.
In the gap between two columns — the content becomes an extra column.

A red drop line means the content can't be placed there.

Moving content with the arrow keys

To move a selected element one grid column to the left or right, press ← or →.

When a column is selected, ← and → swap it with the column next to it.

Changing how many grid columns an item spans

The width of an item in a grid scene is a number of grid columns. To change it:

Select the item.
Drag the marker on its left or right edge. The item snaps to the grid columns.

Changing column widths with the divider

To change the widths of two columns side by side, drag the divider between them:

Hover over the gap between the two columns. The divider appears, with the tooltip Drag to change the column widths.
Drag the divider left or right.

Adding a column

You can add a column to a row of columns in two ways:

Hover over the gap between two columns and click the + that appears. A new column is added in the gap.
Select a column and click the + on its left or right side. A new column is added on that side.

Changing the height of an item

To make a row, column or element taller, select it and drag its bottom edge down. The tooltip on the handle is Resize column height. The handle is shown when the item's height is set to Autofit or Fixed.

To choose a height setting in the right panel instead, such as a fixed height or a full screen height, see Layout types and position settings.

Adding space above a row

To add space above a row, select the row and drag its top edge down. The space is the row's margin, shown as Margin in the right panel.

Changing the padding of a row or column

Padding is the space between the edge of a row or column and its content. To change it, select the row or column and drag one of the tinted bands along the inside of its edges.

Grouping items into a row

Grouping puts several items together in a new row, with a layout you choose. It is the quickest way to turn loose elements into columns or a band with a background, without building the row yourself. To group items:

Select the items: click the first, then Shift+click the others.
Press Cmd+G (Mac) or Ctrl+G (Windows). The menu Group into opens.
Choose a layout, such as Two columns, Vertical group or Autolayout, or a band with a background: Color, Image or Video. Which layouts are offered depends on how many items you selected.

You can also right-click the selection and choose Group into row. After grouping, the menu Try another layout lets you switch to another layout straight away.

You can only group items at the same level. If the selection holds items at different levels, the message You can't group nested elements. appears.

Duplicating content

To duplicate a row, column or element in the Design view, use one of these:

Select it and press Cmd+D (Mac) or Ctrl+D (Windows).
Hold Option (Mac) or Alt (Windows) while you drag it. A copy is dropped at the new spot and the original stays in place.
Right-click it and choose Duplicate Right or Duplicate Below. Duplicate Right is not available for a row, and Duplicate Below is not available for a column.

Deleting content

To delete a row, column or element in the Design view:

Select it.
Press Delete or Backspace.
In the confirmation, click Delete.

You can also open the item's menu, with a right-click or by clicking its drag handle, and choose Delete element.

Undoing and redoing changes

To undo your last change, press Cmd+Z (Mac) or Ctrl+Z (Windows). To redo it, press Shift+Cmd+Z (Mac) or Shift+Ctrl+Z (Windows).

Frequently asked questions

Why do the arrow keys move an element by a whole column?

In a grid scene, content snaps to the grid columns, so the arrow keys move a selected element one grid column at a time. When a column is selected, the arrow keys swap it with the column next to it.

Why does Esc not deselect my element?

In a grid scene, Esc selects the row or column that holds the selected item. Press it again to go one level further up.

Do the keyboard shortcuts for adding elements work in a grid scene?

No. The shortcuts that add an element, such as T for text or I for image, only work in freeform scenes. For all editor shortcuts, see Keyboard Controls.

Why can't I group the selected items?

Items can only be grouped when they are at the same level, for example elements in the same row. If one item sits inside a column and another doesn't, the message You can't group nested elements. appears. Select items at the same level and try again.

Updated on: 29/10/2026