Grid

The container's own cap is --gd-size-container (1200px) plus a --gd-size-margin-expanded (24px) each side, so it stops growing at 1248px of viewport and every width above that goes to the margins. Nothing further changes above --gd-bp-large (1600px).

<GdContainer> <GdGrid> <GdGridItem :span="8">…article…</GdGridItem> <GdGridItem :span="4">…aside…</GdGridItem> </GdGrid> </GdContainer>

span is the expanded width in twelfths. spanMedium takes eighths and spanCompact takes quarters; both default to the same fraction of the row as span, and both clamp to a minimum of one column. GdContainer takes narrow to cap at the reading measure (--gd-size-measure, 660px) instead of the document column.

• Put documents, marketing, news and the console on the grid. The map app is not on it — a map plus one panel has nothing to put in column 7.
• Wrap every gridded page in a GdContainer. It carries the responsive page margins; GdGrid does not.
• Set span only. Add spanMedium or spanCompact only when the default fraction is wrong — an aside that should go full-width on a phone rather than shrink.
• Never change the gutter. 24px at every size, from --gd-size-gutter.
• Cap reading text at the measure, not at the container. 660px, whatever the column around it is doing.
• Use full-bleed for the map and the ink CTA band only. Every other section keeps its margins.
• Let a card grid drop a column rather than squeeze. --gd-size-card-min is 260px and it is a floor.

Why the columns step and the gutter does not

The column count steps down with the window — 12, 8, 4 — while the gutter never changes. A grid whose gutters breathe with the viewport reflows every card at every width; one whose columns step holds its proportions between steps.

The boundaries themselves follow Material 3's window size classes, because GRIDD's breakpoints already sat on them. Adopting a documented external scale is the honest option when the app's own thresholds have independently landed in the same place.

Container and measure answer different questions

GdContainer is the document column — 1200px, centred, carrying the responsive page margins. It answers "how wide is the page". The measure answers "how wide is the text": reading prose never exceeds 68 characters (--gd-size-measure, 660px), no matter how wide the container around it is.

This site runs on both: the reading column is centred in the space between the rails, wide elements — specimens, token tables, the data table — take the column, and every paragraph inside caps at the measure.

Why the app ignores the grid

The grid governs documents, marketing, news and the console. The app itself does not use it: it is a map plus one panel, and a map has no margins. Layout in the app is described by how much map survives, not by column counts.

Why the spans default to a fraction

A half stays a half when the grid drops from 12 columns to 8, which is almost always what a layout means. Making spanMedium and spanCompact required would put the same arithmetic at every call site and get it wrong at some of them; making them optional puts it in one place and leaves the override for the layouts that genuinely need it.