# Grid
> Generated from grid.contract.json — do not edit by hand.

A CSS-grid container — a fixed column count or a responsive auto-fit, with the DS gutter scale, track justify/align, and a responsive collapse.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `columns` | number | `—` | Fixed number of equal-width columns (minmax(0, 1fr) tracks) |
| `min` | number | `—` | Minimum track width for a responsive auto-fit grid; wins over columns |
| `gap` | none | small | middle | large | number | "h v" | `0` | Gutter between cells — a named DS step (8/16/24) / raw px, or two values "h v" for a separate horizontal/vertical gutter |
| `gutter` | same as gap | `—` | Alias of gap (AntD Row vocabulary); gap wins if both are set |
| `justify` | start | center | end | space-between | space-around | space-evenly | `—` | Horizontal distribution of the tracks (justify-content) |
| `align` | start | center | end | stretch | `—` | Vertical alignment of the cells within their row (align-items) |
| `responsive` | boolean | `false` | With columns=N, lets tracks collapse to fewer as the container narrows — no media queries |

## Visual standard (measured)
- Display: grid
- Columns: columns=N → repeat(N, minmax(0, 1fr))
- Auto-fit: min=W → repeat(auto-fit, minmax(W, 1fr))
- Responsive collapse: columns=N + responsive → tracks reflow to fewer as the container narrows
- Gutter scale: none 0 · small 8 · middle 16 · large 24 (or a raw px number)
- Gutter [h,v]: gap="h v" → separate column-gap / row-gap
- Justify: start · center · end · space-between · space-around · space-evenly (justify-content)
- Align: start · center · end · stretch (align-items)

## When to use
- **Grid** — a two-dimensional layout — a card gallery, a stat row, an image grid
- **Flex** — a one-dimensional flow where items size to content
- **min (auto-fit)** — the column count should follow the container width — prefer it over media queries

Reach for `min` (auto-fit) or `responsive` before hand-writing breakpoints — the grid reflows itself. Use `gap="h v"` when rows need tighter spacing than columns. Keep gutters on the named scale so spacing matches the rest of the surface. Grid is layout, never decoration: it paints no background.