Appearance
Grid and layout system
Layout is content-width first: components reflow from the page content column (and nested containers), not only from viewport breakpoints.
Content tokens
| Token role | Typical value |
|---|---|
| Content max width | ~1000px — shell and header align to this |
| Prose max width | 65ch — reading measure for body copy |
| Named page container | e.g. scout-page — container-type: inline-size on the main column |
| Two-column container query | e.g. @container … (min-width: 720px) — main + sub-nav side-by-side |
Viewport media
A small mobile-first scale (e.g. 480 / 640 / 768 / 1024 / 1280) as Griffel @media keys. Use viewport media for chrome (main nav desktop vs burger). Prefer container queries for in-page grids.
Nav desktop media often combines min-width with orientation so portrait tablets keep the burger menu.
Equal tiles — auto-fit grid
A shared component (here: AutoFitGrid) implements CSS grid auto-fit tracks that wrap by available width:
tsx
<AutoFitGrid minItemWidth="160px" justifyItems="stretch" as="ul">
{/* items */}
</AutoFitGrid>| Prop idea | Use |
|---|---|
minItemWidth | Wrap threshold |
gap | Override fluid default gap |
justifyItems | center for logos; stretch for form fields |
as | ul / ol for lists |
Good for: logo strips, field pairs, footer nav, card strips.
Not for: unequal main + sidebar.
Section columns — row + main + side nav
A layout module provides:
| Primitive | Role |
|---|---|
| Row | Stack by default; row at two-column container query |
| Main / double column | Wider primary content |
| Sub-nav column | Section links; order flips when stacked vs side-by-side |
Image + copy splits
A fifty-fifty layout with its own container-type so the split reflows from host width.