/// Layout
Grid
A CSS grid with either a responsive auto-fit track or a fixed column count, and a token-scale gap.
import { Grid } from "@protocore/pds";Basics
By default Grid uses an auto-fit track: cells are at least min wide and the column count grows to fill the row, wrapping automatically. Ideal for stat and card walls.
Fixed columns
Pass a number to columns for an exact column count that stays fixed regardless of width.
When to use it
Use Grid for two-dimensional layout — anything where items align across both rows and columns. The auto-fit mode (default) is a responsive card wall that needs no media queries: set a sensible min width and cells reflow on their own. Use a fixed columns count only when the layout must not reflow (e.g. a strict 3-up on all sizes). For a single row or column of items, Stack is simpler and lighter. Like Stack, the gap is a token step, not pixels.
Usage
Do
- Default to auto-fit with a min width for responsive card and stat walls.
- Reserve a fixed columns count for layouts that must never reflow.
- Tune min to the natural minimum width of a cell's content.
Don't
- Reach for a fixed count when auto-fit would remove the need for breakpoints.
- Use Grid for a plain single-axis list — Stack is the right tool.
- Set a min so large that a single column overflows narrow viewports.
Accessibility
- Grid is a presentational CSS-grid `<div>` with no role of its own.
- CSS grid does not reorder content, so DOM order (and therefore keyboard/reading order) is preserved.
Grid props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
columns | number | "auto-fit" | auto-fit | Fixed column count, or `"auto-fit"` for a responsive minmax track. |
gap | enum | 4 | Gap between cells, mapped to `--pds-space-<n>`. |
min | string | 240px | Minimum column width for the `"auto-fit"` track (ignored for a fixed count). |
style | CSSProperties | — |