prototype-grid — the standardized grid

The three alpha laws hold unchanged from prototype-flex: SINGLE ROOT + REST SPREAD (one div; consumer attributes first, family stamps after — replace, never merge), ZERO TRANSLATION (the props are CSS: cols/rows/gap/areas pass through as grid-template-columns / -rows / gap / grid-template-areas verbatim), and INLINE STYLE ONLY (no utilities, no theme tokens, no css file — the item renders in any host).

The one real coercion is the TRACK FORM: a number N becomes repeat(N, minmax(0, 1fr)) — the no-max-content-blowout form (min(0, 1fr) floors each track at zero so a wide chip can never stretch the column past its fr share); a string stays verbatim for named and hybrid tracks. Measured in the rig below, against the container's RESOLVED track geometry (px per track from computed grid-template-columns), not the style string: three equal tracks at cols={3}, the auto-fit form reflowing its track count with the viewport, and a verbatim 1fr 2fr 1fr ratio resolving to a 1:2:1 px split.

The eight axes are forwarders exactly as on prototype-flex — all no-own, carriers in the consumer style attr, density stamping its rung for descendants, theme riding the .dark bridge, size echoing on the root. The grid-specific accessibility truth: auto-placement follows the DOM in BOTH dimensions, so plain grids keep source order — but the AREAS form lets you place items anywhere, and a template that visually reorders meaningful content breaks the source-order contract the same way row-reverse does on flex.

1 · SINGLE ROOT + REST SPREAD — one div, consumer attributes first, family stamps after. 2 · ZERO TRANSLATION — cols/rows/gap/areas are the CSS grid properties; the sole vocabulary event is the NUMBER form of cols/rows, a coercion to repeat(N, minmax(0, 1fr)) chosen for the no-max-content-blowout guarantee (a track can never grow past its fr share because a chip is wide — the css-architecture grid law's vocabulary). 3 · INLINE STYLE ONLY — zero tokens: a grid track you pass is a track that renders, in any host. The areas form is deliberately a single verbatim string in v0 (an array-join convenience is a recorded future enhancement, not guessed).

The layout trio, cross-referenced: prototype-flex — the row prototype-grid — the tracks prototype-waterfall — the columns — one contract, three engines.

Receipts: the rig's three controls measured end-to-end against the container's RESOLVED track geometry (computed grid-template-columns in px per track: three equal 240px tracks at cols=3; the auto-fit form shrinking to its 140px floor (145px measured) before re-counting; the verbatim 1fr 2fr 1fr ratio resolving 180/361/180; rows=2 pinning two equal row tracks; gap 30 → 30px column-gap with the tracks absorbing it) — task 36; the density rung stamp (data-density=lg explicit, null ambient), the size carrier (font-size: var(--jx-size-effective, 1rem), computed 18px at size={18}) and the dark class bridge were measured on this page's served DOM; the zero-reader rows carry grep receipts over ui/prototype-grid/ (an inline-style-only family). The query() seat below rides the md viewport key (48rem) on the size LANE — the lanes-vs- passthroughs boundary (task 35) applies: cols/rows/gap/areas reject query().

<script lang="ts">
  import PrototypeGrid from '@ui/prototype-grid.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — the §11 stamp scales the root, fr tracks reflow -->
<PrototypeGrid cols={3} size={query({ md: 18 }, 13)} gap={12}>…</PrototypeGrid>

<script lang="ts">
  import PrototypeGrid from '@ui/prototype-grid.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — the §11 stamp scales the root, fr tracks reflow -->
<PrototypeGrid cols={3} size={query({ md: 18 }, 13)} gap={12}>…</PrototypeGrid>

<PrototypeGrid cols={3} size={18} density="small">…</PrototypeGrid>