Grid
Responsive grid layout with column and gap control.
Default
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Columns
cols={2}
1
2
3
4
cols={3}
1
2
3
4
5
6
cols={4}
1
2
3
4
5
6
7
8
Gap Sizes
gap="sm"
1
2
3
gap="md"
1
2
3
gap="lg"
1
2
3
Responsive
Card 1
Responsive content
Card 2
Responsive content
Card 3
Responsive content
Card 4
Responsive content
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Number of columns. Responsively collapses on smaller screens. |
| gap | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Gap between grid items. |
| align | "start" | "center" | "end" | "stretch" | "stretch" | Vertical alignment of grid items. |