Grid
Responsive columns, declared mobile-first: `cols` applies from the smallest screen and `sm`/`md`/`lg`/`xl` override upward at 640 / 768 / 1024 / 1280px.
import Grid from '@/components/ui/Grid';Source: src/components/ui/Grid.tsx
Examples
Mobile-first columns
cols={1} md={2} lg={4} means one column on phones, two from md, four from lg. Skip a breakpoint and the count below it simply holds: cols={1} sm={2} lg={3} xl={4} is two columns all the way through the tablet range. Narrow the stage above to watch it change — that is what the width toggle is for.
1
2
3
4
Available counts
1, 2, 3, 4, 5, 6 and 12 — a fixed set, so a grid can’t end up at 7 columns.
2
2
3
3
3
6
6
6
6
6
6
Props
<Grid> props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | — |
cols | 1 | 2 | 3 | 4 | 5 | 6 | 12 | 1 | — |
sm | 1 | 2 | 3 | 4 | 5 | 6 | 12 | — | — |
md | 1 | 2 | 3 | 4 | 5 | 6 | 12 | — | — |
lg | 1 | 2 | 3 | 4 | 5 | 6 | 12 | — | — |
xl | 1 | 2 | 3 | 4 | 5 | 6 | 12 | — | — |
gap | LayoutGap | 'md' | — |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Declare the phone case in `cols` and widen from there.
- `xl` is the last column a grid can gain: the page container is `max-w-screen-xl`, so nothing widens past 1280px.
Don’t
- Don’t use a Grid for a single row of buttons — that is a Row.
- Don’t hand-write `grid-cols-*` alongside it; the props and the classes will disagree at some breakpoint.