The responsive layout contract — the column model that ties breakpoints, containers, and spacing together. Columns step on the 4/6/8/12 progression; the gutter is a constant space.4 while the page margin widens with the tier. Full and max page frames follow viewport breakpoints; a data-grid-root="main" frame uses container queries so its descendant grid follows the main region after shell chrome takes its share. Component-level layout still belongs to the layout primitives.
The Current badge tracks the tier of this page's own content column — it tops out at 8 columns (its measure minus the sidebar); 12 engages whenever a content column itself reaches 1024px, sidebar or not.
| Tier | Columns | Gutter | Margin | Usage | |
|---|---|---|---|---|---|
base | 4 | Phones — most content stacks | Current | ||
sm ≥ 640 | 6 | Large phones / small tablets | Current | ||
md ≥ 768 | 8 | Tablets — two-region layouts | Current | ||
lg ≥ 1024 | 12 | Desktop — content column ≥ 1024px, sidebar or not | Current |
grid.max resolves to . It caps the content container, not the surface: bands and their backgrounds still bleed to both window edges, while grid-aligned content centers inside the cap. The column model is already at twelve columns from lg onward, so changing the maximum widens those columns rather than creating another tier.
Children place with grid-column: span N. The demo renders in-flow, not in a canvas — its cells land exactly on the page's own columns (toggle the overlay to check). Narrow the window to watch the columns and the Current badge step down.
The overlay is the shipped web/grid-overlay.js facility: it reads the same grid tokens and draws over the declared data-grid-root. On this application frame, its badge reports the grid tier and main-region width separately from the viewport breakpoint — for example, grid md · main 900px · viewport xl. ⌘/Ctrl+G works on every page.