Grid
CSS Grid utility component with preset column and gap configurations. Simplifies common grid layouts without writing custom grid classes.
Column Counts
Preview
2 columns
1
2
3 columns
1
2
3
4 columns
1
2
3
4
Gap Sizes
Preview
gap="none"
1
2
3
gap="sm"
1
2
3
gap="lg"
1
2
3
gap="xl"
1
2
3
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | 1 | 2 | 3 | 4 | 5 | 6 | 12 | 1 | Number of grid columns. |
| gap | "none" | "sm" | "md" | "lg" | "xl" | "md" | Spacing between grid items. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders a semantic
<div>with CSS Grid layout - Supports
refforwarding for DOM access - Passes through all standard HTML attributes including
aria-*androle - Grid items maintain their DOM reading order for screen readers