Grid
StableA grid that changes its number of columns to fit the screen.
Also known as grid layout, columns, simple grid
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Cards that rearrange
One
Two
Three
<Grid cols={{ base: 1, md: 2, lg: 3 }} className="w-full">
<Card>One</Card>
<Card>Two</Card>
<Card>Three</Card>
</Grid>One column on phones, two on tablets, three on large screens.
When to use it
Lays items out in columns that change with the screen size: 4 on phones, 8 on tablets and 12 on large screens. Or give a minimum width, and it fits as many items in a row as there is room for.
Made of: Outer box · Columns · Items · Space between
Use it for
- A page layout with a side rail and a main area.
- A set of cards that should fill the row and wrap.
- Content that needs one column on phones and more on large screens.
Not for
- A row of tags or buttons that should just wrap: use Cluster.
- A single column of items: use Stack.
- Comparing options feature by feature: use ComparisonTable.
Do and avoid
Flight to Lisbon
Hotel, 3 nights
Airport taxi
Travel cover
Flight to Lisbon
Hotel, 3 nights
Airport taxi
Travel cover
Do
- Set columns for page layout and a minimum width for sets of cards.
- Use one or two columns on phones.
- Keep items in reading order.
- Use the page spacing so gaps change with the screen size.
Avoid
- Do not move items so they look different from reading order.
- Do not give items a fixed width.
- Do not put grids inside grids more than two deep.
- Do not use 12 columns on a phone.
On a phone
- Below 840px it uses 4 columns by default, so on a phone each item must span columns or it gets a quarter of the width.
- With the min prop it fits as many columns as it can, and a single column on a phone if min is wider than half the screen.
- The gutter is 16px on a phone and grows at 840px.
Seen in products
- Carbon's grid uses 4, 8 and 16 columns as the screen grows, up to a maximum width.
- Material 3 screen size classes use 4, 8 and 12 columns.
- Atlassian lists screen sizes with 2, 6 and 12 columns (seen only in a snippet).
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | { base?: Cols; md?: Cols; lg?: Cols } | { base: 4, md: 8, lg: 12 } | Column counts per window class. Cols is 1, 2, 3, 4, 6, 8 or 12. |
| min | string | none | Minimum item width as a CSS length. Switches to auto-fit and ignores cols. |
| gap | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | --gutter | Gap step scaled by --density. Omit to use the gutter token (16px, then 24px from md). |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--gutter--density--breakpoint-md--breakpoint-lg
Built in
- It adds no meaning of its own. The items inside carry it.
- Columns drop as the screen narrows, so content stays readable without sideways scrolling.
- It never reorders items, so screen readers and the keyboard follow the order of your code.
What you need to do
- Keep the order on screen the same as the order in your code. Do not use column placement to move items around.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide