Layout
Grid
Arranges children into N equal CSS Grid columns, with optional responsive column counts at design-system breakpoints. A modern API, not the legacy MUI Grid model.
Examples
Three columns
Loading preview
<Grid columns={3} gap="12px">...</Grid>API
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | { mobile?, tablet?, desktop? } | 1 | Equal columns, or a responsive map. |
gap | SpacingScale | string | 0 | Gap between cells. |
rowGap / columnGap | SpacingScale | string | none | Override row or column gap only. |
Guidelines
Do
- Use a responsive columns map for layouts that reflow on mobile.
Avoid
- Do not use Grid for one-dimensional rows; use Stack.