Grid
CSS-grid layout primitive. Use for card grids and equal-width tile rows that reflow with the viewport.
Grid arranges children in a CSS grid. Set a fixed columns count for a predictable layout, or auto-fit / auto-fill to let items reflow to fill the available width. gap uses the spacing scale.
Use it for
- Card grids — the most common Brik use, usually a fixed
3-column layout - Tile rows that should reflow as the viewport narrows (
auto-fit) - Any equal-width, multi-column layout where the cells are peers
For side-by-side Field rows inside a sheet, reach for FieldGrid instead — it locks the column set to the field-layout cases.
Import
import { Grid } from '@brikdesigns/bds';Variants
Fixed columns
columns={1…6} pins the count. Fixed grids collapse responsively on narrow viewports so they never overflow.
<Grid columns={3} gap="lg">…</Grid>Auto reflow
auto-fit (default) grows items to fill each row; auto-fill keeps empty tracks. minColumnWidth (default 240px) sets the reflow threshold.
<Grid columns="auto-fit" minColumnWidth="200px">…</Grid>When not to use
Grid is for equal-weight peers. Variable-width columns or a header/rows structure is a Table, not a Grid.
- For a single-axis line of items that wraps (tags, buttons), use Cluster.
- For one-dimensional vertical or horizontal spacing, use Stack.
Accessibility
- Renders a plain element (
<div>by default, override withas) withdisplay: grid. It adds no semantics; children keep their own roles.
API
| Prop | Type | Default |
|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | 'auto-fit' | 'auto-fill' | 'auto-fit' |
minColumnWidth | string | '240px' |
gap | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lg' |
as | ElementType | 'div' |
children | ReactNode | — |
Plus all standard HTML attributes for the rendered element.
Related
- Stack — one-axis layout
- Cluster — wrapping row of items
- Field grid — the field-layout-specific grid
- Storybook playground