section
column
row
module
page
section
column · start 0 · span 7
row
module · span 6
module · span 6
column · start 7 · span 5
section
module · span 4
module · span 4
module · span 4
A page is built from three sections. The middle section splits into two columns,
and the left column stacks two rows. A module may sit directly in a section or
inside a row — both appear above. Only `column` and `module` nodes carry
placement; sections and rows are always full width within their parent.
| Node | May contain | Carries placement |
| --- | --- | --- |
| root | `section` | No |
| `section` | `column`, `module` | No — always a root container |
| `column` | `row` | Yes |
| `row` | `column`, `module` | No — always full width in its column |
| `module` | nothing | Yes |
Sections and rows do not carry placement relative to their own children. A row
is always full width within its parent column, and a section is always a root
container. This prevents two competing width concepts from existing at once.
A module node references exactly one existing `cms_page_blocks` row, and every
page block appears exactly once in the layout. A page may contain many module
instances of the same `block_type` — each is its own block row with independent
content and its own module node. The one-placement rule constrains block rows,
not block types.
## Placement contract [#placement-contract]
Direct `column` and `module` children of sections and rows declare a zero-based
`start` and a `span`:
```ts
interface GridPlacement {
desktop: { start: number; span: number };
tablet?: { start: number; span: number };
mobile?: { start: number; span: number };
}
```
- `start` is `0..11`, `span` is `1..12`, and `start + span <= 12`.
- Sibling intervals must not overlap at any breakpoint. Gaps are allowed.
- Tablet inherits desktop when omitted.
- Mobile defaults to `{ start: 0, span: 12 }` when omitted, so desktop columns
stack safely on small screens.