import { Grid } from "@danagraph/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | string | — | Grid columns (number → repeat(n, 1fr)) |
rows | number | string | — | Grid rows (number → repeat(n, 1fr)) |
gap | SpaceToken | string | — | Gap between cells |
flow | CSSProperties['gridAutoFlow'] | — | Auto-flow direction |
align | CSSProperties['alignItems'] | — | Row alignment |
inline | boolean | — | Use inline-grid |
columnsType
number | stringDefault —Grid columns (number → repeat(n, 1fr))
rowsType
number | stringDefault —Grid rows (number → repeat(n, 1fr))
gapType
SpaceToken | stringDefault —Gap between cells
flowType
CSSProperties['gridAutoFlow']Default —Auto-flow direction
alignType
CSSProperties['alignItems']Default —Row alignment
inlineType
booleanDefault —Use inline-grid
MobileStacks / Scroll
Multi-column grids collapse to 1 column below sm breakpoint by default. Override with grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 as needed.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?