Grid
A 12-column grid with a constant 24px gutter, on Material 3's window size boundaries. The app itself ignores it.
Columns & margins
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.
0–599416px24pxFluid — the margin is the layout600–839824px24pxFluid840–11991224px24pxFluid to 1200px1200+1224px24pxFixed 1200px, centred — margins take the surplusLive grid
The real components, at this viewport. Resize the window and watch the twelve columns become eight, then four — the half-width items stay half-width, because their medium and compact spans default to the same fraction of the row.
Container & measure
Two widths sit above the grid, and they 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.
Usage
<GdContainer> <GdGrid> <GdGridItem :span="8">…article…</GdGridItem> <GdGridItem :span="4">…aside…</GdGridItem> </GdGrid> </GdContainer>span is the expanded width in twelfths. Medium and compact spans default to the same fraction of the row — a :span="6" is half everywhere — and spanMedium / spanCompact exist for the layouts where the fraction is wrong, like an aside that should go full-width on a phone rather than shrink.