## Grid
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.
Default to the HTML snippet — <aha-grid> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- columns: number, default —. Fixed number of equal-width columns (minmax(0, 1fr) tracks)
- min: number, default —. Minimum track width for a responsive auto-fit grid; wins over columns
- gap: none | small | middle | large | number | "h v", default 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, default —. Alias of gap (AntD Row vocabulary); gap wins if both are set
- justify: start | center | end | space-between | space-around | space-evenly, default —. Horizontal distribution of the tracks (justify-content)
- align: start | center | end | stretch, default —. Vertical alignment of the cells within their row (align-items)
- responsive: boolean, default false. With columns=N, lets tracks collapse to fewer as the container narrows — no media queries
Tokens: text-default.
Use when: 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).