Grid
Usage
Use Grid for two-dimensional layout: dashboards, vehicle card lists, form columns. Use Container once per page to cap line length and center the content column.
- Auto-fit is the default for repeating items (vehicle cards, depot tiles): it needs no breakpoints and adapts to its slot.
- 12-column spans are for page regions with fixed proportions (a 9 + 3 work order view with a side panel).
- Every child spans all 12 columns on small screens unless a responsive span says otherwise — mobile is the default.
- Use Stack, not Grid, for a single column of items.
Anatomy
- Grid —
.grid(12 equal tracks) or.grid--auto-fit - Item span —
.col-span-Nand.col-span-{sm|md|lg|xl}-N - Gap —
--grid-gap(default--space-4) - Container —
.container, max width--size-container-xl, growing gutters
Examples
Grid
12
6
6
4
4
4
3
9
Van KX-219
In workshop · Bay 4
Truck HT-507
On route · Riverside
Van KX-344
Available · North Yard
Pickup PU-118
Service due in 3 days
Work order WO-4182
Full width on phones, 8 of 12 from 48rem, 9 of 12 from 64rem.
Vehicle details
Side panel
<div class="grid">
<div class="col-span-6">…</div><div class="col-span-6">…</div>
</div>
<!-- Repeating items: no breakpoints needed -->
<ul class="grid grid--auto-fit" style="--grid-min: 12rem" role="list">…</ul>
<!-- Responsive spans: full width by default -->
<div class="grid">
<div class="col-span-md-8 col-span-lg-9">…</div>
<div class="col-span-md-4 col-span-lg-3">…</div>
</div>Container
Settings
Centered column, max 48rem (.container--md) with a 16px gutter that grows to 24px and 32px on wider screens.
<main class="container">…</main> <!-- max 80rem -->
<main class="container container--md">…</main> <!-- forms and settings, max 48rem -->API
| Hook | Values | Purpose |
|---|---|---|
.grid | block class | 12 equal columns; children span 12 by default |
.col-span-{1|2|3|4|6|8|9|12} | class | Span at every width |
.col-span-sm-{4|6|12}, -md-{3|4|6|8}, -lg-{3|4|8|9}, -xl-{2|3} | class | Span from 40 / 48 / 64 / 80rem (mirrors --breakpoint-*) |
.grid--auto-fit | modifier class | As many columns as fit, each ≥ --grid-min |
--grid-gap, --grid-min | custom property | Gap token; track minimum (default 16rem) |
.container, .container--md | --lg | block / modifier | Centered page column, 80 / 48 / 64rem max |
Do and don't
Vehicle cards in .grid--auto-fit with --grid-min: 14rem.
.col-span-3 on cards with no responsive span.
Accessibility
- Layout only: no roles. When grid items are a collection (vehicle cards), use
ul/liwithrole="list"so the count is announced. - Don't use
grid-auto-flow: dense, explicit placement ororderon interactive content: focus order must follow visual order. - Reflow: every layout collapses to one column at 320px wide (WCAG 1.4.10).
Tokens
| Custom property | Purpose |
|---|---|
--space-4 (gap), --space-4 | -6 | -8 (container gutters) | Spacing |
--size-container-md | -lg | -xl | Container widths |
--breakpoint-sm | -md | -lg | -xl | Mirrored as literal rem in media queries |