order
Grid
Equal columns that reflow on their own.
Project overviewFour stats at 120px minimum; narrow the stage and they wrap
Tasks done
12 of 14
+3 this week
Budget used
£7,640
of £12,000
Next review
Fri 24 Oct
Maya Chen
Due soon
7
3 today
Tasks done
12 of 14
+3 this week
Budget used
£7,640
of £12,000
DesignEngResearchOps
In context
ProjectsProject cards at 160px minimum
Brand
Harbour rebrand
Identity, site and launch kit for the harbour trust.
On trackMC
Product
Tideline mobile
Offline tasks and a quiet inbox for the crew.
ReviewJW
Research
Crew interviews
Twelve calls, one clear pattern.
LatePN
Operations
Rota export
Shifts out to payroll without the spreadsheet.
DoneLS
Brand
Depot signage
Wayfinding for the three northern depots.
ReviewMC
Props
| Prop | Type | Required | Default |
|---|---|---|---|
as | ElementType | undefined | No | div |
gap | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined | No | md |
columns | number | undefined | No | — |
minItemWidth | string | number | undefined | No | 240 |
Responsive with zero breakpoints
minItemWidth is real repeat(auto-fit, minmax(...)): the grid reflows toward one column on its own. Pass columns instead for a fixed count that never reflows. Reach for Row/Col when regions of one row need different widths.
data-rebar-* attributes
data-rebar-component="grid" on the root.
Migrating to Ant Design
AntD's Row/Col use a fixed 24-unit span system rather than CSS Grid's auto-fit; a migration recomputes fixed spans from the rendered item count.