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. columnSpan and rowSpan on GridItem (and on a subgrid Grid) take a fixed GridSpan or a GridResponsiveSpan: initial applies at every width, and each GridBreakpoint key replaces it once the nearest container is wider than that breakpoint (1080, 1280, 1600, 1920, 2560, 3440px). The largest matching key wins, and a collapsing parent still forces one track. Wrap the grid in a Box with containerType={ContainerType.InlineSize}. defineGridAreas builds a typed layout: GridTrack columns and rows (tokens, fr tracks or sizing keywords, or { space } steps), a matrix of area names, and below layouts for narrower containers keyed by the collapseBelow widths. Children take area={layout.areas.<name>}; a name the layout does not declare fails typecheck. GRID_AREA_PRESETS holds the approved layouts as starting points: mainAside, asideMain, headerMainAside, headerMainFooter. Reading order. DOM order must match the logical reading and focus order, which is the order of the narrowest (single-column) layout. Area layouts may rearrange children visually only in ways that keep that order sensible; they never change what a screen reader or the Tab key meets first. defineGridAreas records the order as readingOrder; put the children in that order. 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.