Grid
Preview appears after the next Storybook update.
<Grid />When to use
Use it for
- Card and tile grids: minItemWidth makes them responsive without breakpoints.
- Dashboards and settings layouts with a fixed column count.
- render={<ul />} when the cells are a list of items.
Not for
- Tabular data with headers: use Table.
- A single row or column: use Inline or Stack.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Prefer minItemWidth for tiles
Tiles reflow from four columns to one as space shrinks, with no media queries.
Many fixed columns on small screens
Twelve fixed columns at phone width make unreadable slivers. Use minItemWidth or fewer columns.
Accessibility
- A plain div by default with no role; it is not a data grid. Use Table for data.
- Cells flow in DOM order, so reading and tab order follow the visual order row by row.
Content guidelines
- Not applicable: Grid holds no copy of its own.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Grid/Grid.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Grid container
.grid
Motion and interaction
Grid does not animate: it only lays out other components.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Grid/Grid.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | 1 | Fixed number of equal columns (1 to 12). Ignored when minItemWidth is set. Default 1. |
minItemWidth | '60' | '72' | '80' | '96' | '120' | none | Responsive columns: as many as fit, each at least this size token wide (`80` = 320px). Use this instead of breakpoints for card and tile grids. |
gap | SpaceToken | none | Space between cells, a key of the space scale. Default: the density token `layout.gap`. |
render | ReactElement | none | Render another element, for example `<ul />`. |
Playground
Change the props and see the real Grid update. Controls are generated from the TypeScript props; nothing here changes the system.
<Grid minItemWidth="60" gap="3" />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Grid in Storybook).
Embed Storybook stories here (2)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Layout utilities: Stack, Inline, Grid (fixed columns or auto-fit by minimum item width) and Container (token widths and gutters)
v1.0.0, Nov 11, 2026
- Fix
Measure: a grid with two or more columns and two or more rows, filled row by row, is a row that wraps at its measured width, its column gap as the item spacing and its row gap between lines, each item at its track's width
v1.0.0, Nov 11, 2026
- Fix
Being built: a library request for a component the library has now shows that component's real Library preview in List, Grid and Board (the same stage as Library > Components cards, now one shared component), instead of the generic component icon
v1.0.0, Nov 11, 2026