Primitive

Grid

Tokenized responsive grid primitive for repeated cards, controls, and specimens.

Use Grid before writing item-local columns. Choose count semantics, never raw track strings.
layout
DOM renderImage render
GridDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Auto-fit repeated items.
Render state

Three

Fixed three-column scan grid.
InputReasonOutput
Render state

Compact

Compact repeated controls.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
columns'auto' | 'one' | 'two' | 'three'-Column recipe.
density'compact' | 'comfortable' | 'editorial'-Grid gap density.
childrenReactNode-Grid items.