Grid
Responsive grid layout with predefined column presets and configurable gap sizes.
Import
tsx
import { Grid, GridItem } from '@tac-ui/web';Playground
Interactively configure the Grid props below.
Item 1
Item 2
Item 3
Item 4
tsx
<Grid variant="3up" gap="md">
<GridItem><div>Item 1</div></GridItem>
<GridItem><div>Item 2</div></GridItem>
<GridItem><div>Item 3</div></GridItem>
<GridItem><div>Item 4</div></GridItem>
</Grid>2-Up
Two equal columns. Stacks to a single column on small screens.
Item 1
Item 2
tsx
<Grid variant="2up" gap="md">
<GridItem><div>Item 1</div></GridItem>
<GridItem><div>Item 2</div></GridItem>
</Grid>2-1
Three-column grid where the first item spans two columns, creating a wide-left layout.
Wide Item
Item 2
tsx
<Grid variant="2-1" gap="md">
<GridItem><div>Wide Item</div></GridItem>
<GridItem><div>Item 2</div></GridItem>
</Grid>1-2
Three-column grid where the last item spans two columns, creating a wide-right layout.
Item 1
Wide Item
tsx
<Grid variant="1-2" gap="md">
<GridItem><div>Item 1</div></GridItem>
<GridItem><div>Wide Item</div></GridItem>
</Grid>3-Up
Three equal columns. Responsive: 1 column on mobile, 2 on tablet, 3 on desktop.
Item 1
Item 2
Item 3
tsx
<Grid variant="3up" gap="md">
<GridItem><div>Item 1</div></GridItem>
<GridItem><div>Item 2</div></GridItem>
<GridItem><div>Item 3</div></GridItem>
</Grid>4-Up
Four equal columns. Responsive: 1 column on mobile, 2 on tablet, 4 on large screens.
Item 1
Item 2
Item 3
Item 4
tsx
<Grid variant="4up" gap="md">
<GridItem><div>Item 1</div></GridItem>
<GridItem><div>Item 2</div></GridItem>
<GridItem><div>Item 3</div></GridItem>
<GridItem><div>Item 4</div></GridItem>
</Grid>6-Up
Six equal columns. Responsive: 2 columns on mobile, 3 on tablet, 6 on large screens.
1
2
3
4
5
6
tsx
<Grid variant="6up" gap="md">
<GridItem><div>1</div></GridItem>
<GridItem><div>2</div></GridItem>
<GridItem><div>3</div></GridItem>
<GridItem><div>4</div></GridItem>
<GridItem><div>5</div></GridItem>
<GridItem><div>6</div></GridItem>
</Grid>Gap Sizes
Control spacing between cells with the gap prop. Supports none, sm, md, and lg.
gap="none"
A
B
C
gap="sm"
A
B
C
gap="md"
A
B
C
gap="lg"
A
B
C
tsx
<Grid variant="3up" gap="none">...</Grid>
<Grid variant="3up" gap="sm">...</Grid>
<Grid variant="3up" gap="md">...</Grid>
<Grid variant="3up" gap="lg">...</Grid>API Reference
Grid props:
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "2up" | "side-by-side" | "2-1" | "1-2" | "1-3up" | "3up" | "4up" | "6up" | "1-2-4up" | "2up" | Layout preset that defines the column structure. |
| gap | "none" | "sm" | "md" | "lg" | "md" | Gap size between grid cells. |
| className | string | - | Additional CSS class names. |
| children | React.ReactNode | - | Grid cell items, typically GridItem components. |
GridItem props:
| Prop | Type | Default | Description |
|---|---|---|---|
| span | number | - | Number of columns this item should span. |
| className | string | - | Additional CSS class names. |
| children | React.ReactNode | - | Content rendered inside the grid cell. |