1 Column
1
2
2 Columns
1
2
3
4
3 Columns
1
2
3
4
5
6
4 Columns
1
2
3
4
5
6
7
8
Responsive Columns
Use columnsSm, columnsMd, and columnsLg to change column count at breakpoints. The base columns prop sets the mobile-first default.
columns=1 columnsSm=2 columnsMd=3 columnsLg=4
1
2
3
4
5
6
7
8
Gap Sizes
gap="xs"
1
2
3
gap="sm"
1
2
3
gap="md"
1
2
3
gap="lg"
1
2
3
gap="xl"
1
2
3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Number of grid columns |
| gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Space between items |
| columnsSm | 1 | 2 | 3 | 4 | 5 | 6 | — | Column count at sm breakpoint (640px+) |
| columnsMd | 1 | 2 | 3 | 4 | 5 | 6 | — | Column count at md breakpoint (768px+) |
| columnsLg | 1 | 2 | 3 | 4 | 5 | 6 | — | Column count at lg breakpoint (1024px+) |
| as | React.ElementType | "div" | Rendered HTML element |
| className | string | — | Additional classes on the root element |
Usage
import { Grid } from "substrateui";
<Grid columns={3} gap="lg">
<Card>Feature 1</Card>
<Card>Feature 2</Card>
<Card>Feature 3</Card>
</Grid>
{/* Responsive: 1 col on mobile, 2 on sm, 3 on md, 4 on lg */}
<Grid columns={1} columnsSm={2} columnsMd={3} columnsLg={4} gap="md">
<Card>Item 1</Card>
<Card>Item 2</Card>
<Card>Item 3</Card>
<Card>Item 4</Card>
</Grid>