Grid
A responsive grid layout component
Preview
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Installation
Usage
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Child elements to display in the grid |
size | 'tiny' | 'small' | 'medium' | 'large' | 'medium' | Grid density preset |
className | string | '' | Additional CSS classes |
...props | React.HTMLAttributes<HTMLDivElement> | - | All standard div attributes |
Grid Sizes
| Size | Default | sm | md | lg | xl | 2xl |
|---|---|---|---|---|---|---|
tiny | 4 | 4 | 5 | 6 | 7 | 10 |
small | 2 | 3 | 4 | 5 | 6 | 8 |
medium | 1 | 2 | 3 | 4 | 5 | 6 |
large | 1 | 2 | 2 | 3 | 4 | 4 |
The gridSizeClasses map is also exported for use with custom components.