Grid
A two-dimensional CSS grid for rows of cards, stats and tiles. Pick a fixed column count, or let columns auto-fit by a minimum width.
1
2
3
4
5
6
<Grid>
<Box>1</Box>
<Box>2</Box>
<Box>3</Box>
<Box>4</Box>
<Box>5</Box>
<Box>6</Box>
</Grid>Import
import { Grid } from "@merid/react";Examples
Fixed columns
columns sets 1–6 equal columns (default 3). At 640px and below, a fixed grid collapses to a single column.
1
2
3
4
5
6
7
8
<Grid columns={4} gap={3}>
{items.map((item) => <Box key={item.id}>{item.label}</Box>)}
</Grid>Auto-fit
minItemWidth switches to auto-fit: as many columns as fit, each at least that wide. It overrides columns and needs no breakpoint.
1
2
3
4
5
6
7
<Grid minItemWidth={140} gap={4}>
{items.map((item) => <Box key={item.id}>{item.label}</Box>)}
</Grid>API reference
Renders a div unless as is given; forwards its ref and passes all HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Fixed number of equal columns. Collapses to one at ≤ 640px. Ignored when minItemWidth is set. |
minItemWidth | number | string | – | Responsive auto-fit: each column is at least this wide (number = px). |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 14 | 16 | 18 | 28 | 6 | Gap from the --mrd-space-* scale (6 = 24px). |
as | ElementType | "div" | Element or component to render instead of a div. |
Styling
| Hook | Values |
|---|---|
.mrd-grid | Root element |
data-layout | fixed (columns) · auto (minItemWidth) |
Component variables, set inline from props: --mrd-grid-gap, --mrd-grid-columns (fixed layout) and --mrd-grid-min (auto layout).
@media (min-width: 1024px) {
.dashboard.mrd-grid { --mrd-grid-columns: 4; }
}Accessibility
- Grid is layout only and adds no role — it is not an ARIA
grid. Useas="ul"withlichildren for a list of items. - Items flow in DOM order; keep that order meaningful for keyboard and screen reader users.
Guidelines
Do
Prefer minItemWidth for card collections so the grid adapts to any container width.
Avoid
Use Grid for a single row of buttons or form controls — that is a Stack.