Layouts
Layouts are rows on a page. Each layout has one or more slots where elements are placed. Choose from single, multi-column, grid, sidebar, and spacer variants.
A layout is a horizontal row that divides a page into one or more slots. Each slot holds one element. Layouts stack vertically to build up a page.
Layout types
| Type | Slots | Description |
|---|---|---|
| Single column | 1 | Full-width row. Default choice for most content. |
| Two columns | 2 | Equal-width columns side by side. |
| Three columns | 3 | Three equal-width columns. |
| Grid | 4 | Two-by-two grid of equal slots. |
| Sidebar left | 2 | Narrow slot on the left, wide slot on the right. |
| Sidebar right | 2 | Wide slot on the left, narrow slot on the right. |
| Spacer | 0 | Empty row for vertical spacing. No content slots. |
Working with layouts
Adding a layout
Click Add layout in the sidebar, or click the + button that appears between layouts on the canvas when you hover. Select the layout type from the picker.
Reordering layouts
Each layout has a drag handle on its left edge. Drag the handle to move the layout up or down the page.
Deleting a layout
Hover a layout and click the ⋯ menu that appears on the right. Select Delete layout. This deletes the layout and all elements inside it.
Deleting a layout is undoable with Cmd Z / Ctrl Z, but only within the current session. Reloading the page clears undo history.
Special layout behavior
Spacer layouts
Spacer layouts add vertical whitespace between content rows. They have no content slots.
Available heights:
| Size | Approximate height |
|---|---|
| Small | 24px |
| Medium | 48px |
| Large | 96px |
| Extra large | 192px |
Select the size when adding the spacer, or change it from the layout's ⋯ menu.
Mobile behavior
All multi-column layouts collapse to a single column on mobile. The slot order on desktop becomes the top-to-bottom order on mobile. Spacer heights are reduced proportionally on smaller screens.