Grid
A CSS Grid layout component with configurable columns, gap, and auto-fill/auto-fit modes. Use Grid to create responsive multi-column layouts for cards, features, and content sections.
Column Counts
columns={2}
1
2
3
4
<Grid columns={2} gap="md">
<PlaceholderBox>1</PlaceholderBox>
<PlaceholderBox>2</PlaceholderBox>
<PlaceholderBox>3</PlaceholderBox>
<PlaceholderBox>4</PlaceholderBox>
</Grid>columns={3}
1
2
3
4
5
6
<Grid columns={3} gap="md">
<PlaceholderBox>1</PlaceholderBox>
<PlaceholderBox>2</PlaceholderBox>
<PlaceholderBox>3</PlaceholderBox>
<PlaceholderBox>4</PlaceholderBox>
<PlaceholderBox>5</PlaceholderBox>
<PlaceholderBox>6</PlaceholderBox>
</Grid>columns={4}
1
2
3
4
5
6
7
8
<Grid columns={4} gap="md">
<PlaceholderBox>1</PlaceholderBox>
<PlaceholderBox>2</PlaceholderBox>
<PlaceholderBox>3</PlaceholderBox>
<PlaceholderBox>4</PlaceholderBox>
<PlaceholderBox>5</PlaceholderBox>
<PlaceholderBox>6</PlaceholderBox>
<PlaceholderBox>7</PlaceholderBox>
<PlaceholderBox>8</PlaceholderBox>
</Grid>Gap Variants
gap="sm"
1
2
3
<Grid columns={3} gap="sm">
<PlaceholderBox>1</PlaceholderBox>
<PlaceholderBox>2</PlaceholderBox>
<PlaceholderBox>3</PlaceholderBox>
</Grid>gap="lg"
1
2
3
<Grid columns={3} gap="lg">
<PlaceholderBox>1</PlaceholderBox>
<PlaceholderBox>2</PlaceholderBox>
<PlaceholderBox>3</PlaceholderBox>
</Grid>Responsive Auto-Fill
Auto-fill with minimum child width
Card 1
Card 2
Card 3
Card 4
Card 5
<Grid columns="auto-fill" minChildWidth="200px" gap="md">
<PlaceholderBox>Card 1</PlaceholderBox>
<PlaceholderBox>Card 2</PlaceholderBox>
<PlaceholderBox>Card 3</PlaceholderBox>
<PlaceholderBox>Card 4</PlaceholderBox>
<PlaceholderBox>Card 5</PlaceholderBox>
</Grid>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | "auto-fill" | "auto-fit" | 1 | Number of grid columns, or auto-fill/auto-fit for responsive layouts. |
gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Controls the spacing between grid items. |
minChildWidth | string | — | Minimum child width for auto-fill/auto-fit columns (e.g. "200px"). |
asChild | boolean | false | When true, merges props onto the child element via Radix Slot instead of rendering a wrapping div. |