API and Development
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).
| Name | Type | Default | Description |
|---|---|---|---|
template | GridTemplate | — | Column track template (equal, ratio, sidebar, queue metrics, auto-fill). |
rows | GridRows | — | Row template. |
flow | GridFlow | row | Auto-placement flow. |
align | GridAlign | — | Align items. |
justify | GridJustify | — | Justify content. |
gap | GridGap | — | Gap spacing scale. |
collapseBelow | GridCollapseBelow | — | Single column below a container width breakpoint. |
display | GridDisplay | grid | grid or inline-grid. |
GridProps and GridItem in @prepared911/ui for the full surface.
| Member | Tracks |
|---|---|
EqualHalves | repeat(2, minmax(0, 1fr)) |
EqualThirds | repeat(3, minmax(0, 1fr)) |
EqualQuarters | repeat(4, minmax(0, 1fr)) |
EqualSixths | repeat(6, minmax(0, 1fr)) |
EqualTwelfths | repeat(12, minmax(0, 1fr)) |
EqualTenths | repeat(10, minmax(0, 1fr)) |
TwoOne | minmax(0, 2fr) minmax(0, 1fr) |
ThreeOne | minmax(0, 3fr) minmax(0, 1fr) |
QueueMetricsStandard | var(--layout-queue-metrics-standard) minmax(0, 1fr) minmax(0, 1fr) |
QueueMetricsEct | var(--layout-queue-metrics-ect) minmax(0, 1fr) minmax(0, 1fr) |
SidebarStartMain | var(--layout-panel-fixed) minmax(0, 1fr) |
MainSidebarEnd | minmax(0, 1fr) var(--layout-panel-fixed) |
AutoFillMinItem | repeat(auto-fill, minmax(var(--layout-grid-auto-fill-min), 1fr)) |
14.4375rem (standard) and 21.0625rem (ECT) at a 16px root.
| Pattern | Use |
|---|---|
Column ratios (2:1, 3:1, ten equal tracks) | Grid + GridTemplate |
| Fixed metric column + two flexible peers on queue boards | QueueMetricsStandard / QueueMetricsEct |
| Flex row with one scrollable child | FlexBox + item={FlexItem.FillScroll} |
| Cross-axis override on one flex child | alignSelf on Box / FlexBox |