Grid

Grid is a layout host for tokenized column and row tracks. It does not carry paint—put background, border, and content on Box (or other primitives) inside cells. Use template={GridTemplate.*} for product layouts instead of consumer grid-template-columns. Pair with GridItem when a child spans multiple tracks. For one-dimensional flex inside a cell (scroll hosts, toolbars), use Box / FlexBox item (FlexItem, alignSelf). See GridProps and GridItem in @prepared911/ui for the full surface. Queue metric tokens resolve to 14.4375rem (standard) and 21.0625rem (ECT) at a 16px root. A nested Grid normally sizes its own tracks. With subgrid, its children sit on the parent's tracks instead, so groups line up with each other. The nested Grid must be the parent's grid item, so the span goes on it: columnSpan for GridSubgrid.Columns, rowSpan for GridSubgrid.Rows, both for GridSubgrid.Both. The types require the span and reject own tracks (template, rows, collapseBelow) on an adopted axis. Gap. Leave gap unset on an adopted axis to keep the parent's gutter. A set gap replaces the gutter inside the subgrid, and its children still start on the parent's track edges. Paint. Grid has none, so a subgridded card puts its surface on the Box parts inside it. Each section is a column subgrid spanning every parent column, so the labels in both sections share the parent's FitStartMain leading track and every input starts on the same edge. The parent's column gap of 8 is the label-to-control gap. Each card is a row subgrid spanning three parent rows, one per part, so headers, bodies and footers share rows across the cards. The long body grows its row for every card. gap={{ row: 0 }} on each card joins its painted parts; the parent's gap of 12 still separates the cards. AutoFillMinItem adds and drops columns with the available width, so the cards reflow at high zoom; a fixed equal-column template would need collapseBelow. The previews below mirror Grid stories in Storybook.