Create grid templates and use the editor
A grid template describes a grid layout: how many columns and rows it has, where the individual slots sit and how large they are – separately for desktop, tablet and mobile. Saved templates then become available as a CMS block.
Create a new template
- In the admin, open Content → Dynamic Grids.
- Click Create grid in the top right.
- Enter a meaningful Name (e.g.
Hero Grid 2x3). The name is shown as the block title in the picker later. - Configure the grid in the editor (see below).
- Click Save.
The editor at a glance
The Desktop, Tablet and Mobile tabs switch the viewport you are editing. Above them you control the grid:
| Control | Meaning |
|---|---|
| Columns | Number of grid columns (max. 12). |
| Rows | Number of grid rows (max. 6). |
| Column Gap | Horizontal gap between slots (any CSS value, e.g. 24px). |
| Row Gap | Vertical gap between slots. |
| Sync viewports | Applies changes to all viewports (see below). |
| Sync gaps | Keeps column and row gap identical. |
Editor limits
A grid can contain at most 12 columns, 6 rows and 12 slots. These limits are fixed.
Add, move and resize slots
- Add: click an empty cell. A new slot is placed there.
- Move: drag a slot to another position.
- Resize: drag the slot's handle or use the buttons to expand/shrink width and height.
- Remove: remove a slot via the slot actions. Depending on the synchronization setting it moves to the depot (see below) instead of being deleted immediately.
- Undo: Undo reverts the last step.
Overlapping slots
Slots may overlap. The order defines the layer: slot 2 sits above slot 1, slot 3 above slot 2, and so on. The editor points this out as soon as slots overlap.
Responsive layouts: configure viewports separately
Each viewport (desktop, tablet, mobile) can have its own grid – e.g. three columns on desktop and a single stacked column on mobile.
- With Sync viewports active, columns, rows, slots and gaps apply to all viewports at once.
- Turn synchronization off to build a separate layout per viewport.
If you enable synchronization while the viewports already differ, the Sync viewports dialog appears. It applies the settings of the currently selected viewport to all others – the differing layouts of the other viewports are overwritten.
Breakpoint mapping
The three viewports apply in these ranges in the storefront: Mobile ≤ 768 px · Tablet 769–1024 px · Desktop > 1024 px.
Sync gaps
The Sync gaps toggle keeps column and row gap identical. If you enable it while the values differ, the Sync gaps dialog appears and adopts the column gap as the new row gap.
This setting is stored per viewport. With viewport synchronization active it applies to all viewports, otherwise only to the current one.
The depot
The depot is a holding area for slots that currently sit outside the visible grid – e.g. because a slot is used in another viewport or you parked it temporarily.
- Back into the grid: drag a slot from the depot into a grid cell.
- Eye badge: indicates the slot is visible in another viewport.
- Delete permanently: removes the slot from all viewports.
Screenshot checklist
- [ ] Menu entry Content → Dynamic Grids
- [ ] Create new grid detail page (name field + editor)
- [ ] Editor with placed, partly overlapping slots
- [ ] Depot area with a parked slot
- [ ] Sync viewports dialog