Grid
A flexible grid system for creating responsive layouts with ease.
API Reference
Grid Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | Responsive | 1 | Number of columns |
| gap | number | string | Responsive | 4 | Gap between grid items |
| rows | number | Responsive | auto | Number of rows |
| flow | 'row' | 'col' | 'row-dense' | 'col-dense' | 'row' | Grid auto flow direction |
| as | React.ElementType | 'div' | HTML element to render |
GridItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colSpan | number | Responsive | 1 | Number of columns to span |
| rowSpan | number | Responsive | 1 | Number of rows to span |
| as | React.ElementType | 'div' | HTML element to render |
Basic Usage
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<Grid cols={3} gap={4}>
<GridItem>Item 1</GridItem>
<GridItem>Item 2</GridItem>
<GridItem>Item 3</GridItem>
<GridItem>Item 4</GridItem>
<GridItem>Item 5</GridItem>
<GridItem>Item 6</GridItem>
</Grid>Responsive Grid
Responsive 1
Responsive 2
Responsive 3
Responsive 4
Responsive 5
Responsive 6
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}>
<GridItem>Responsive 1</GridItem>
<GridItem>Responsive 2</GridItem>
<GridItem>Responsive 3</GridItem>
<GridItem>Responsive 4</GridItem>
<GridItem>Responsive 5</GridItem>
<GridItem>Responsive 6</GridItem>
</Grid>Grid with Spans
Span 2 columns
Item 1
Item 2
Item 3
Span 3 columns
<Grid cols={4} gap={4}>
<GridItem colSpan={2}>Span 2 columns</GridItem>
<GridItem>Item 1</GridItem>
<GridItem>Item 2</GridItem>
<GridItem>Item 3</GridItem>
<GridItem colSpan={3}>Span 3 columns</GridItem>
</Grid>Auto-fit Grid
Auto-fit 1
Auto-fit 2
Auto-fit 3
Auto-fit 4
<div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4"> <div>Auto-fit 1</div> <div>Auto-fit 2</div> <div>Auto-fit 3</div> <div>Auto-fit 4</div> </div>