Overview
Grid is a CSS grid-based layout system with 12 columns by default. It provides fine-grained control over column spans and gaps, perfect for complex responsive layouts.
Import
import { Grid } from '@kivora/react';
Props
Grid Container
cols
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
default:"12"
Number of columns in the grid.
gap
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
Uniform gap between all cells (overrides gapX and gapY).
gapX
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
Horizontal gap between columns.
gapY
0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12
Vertical gap between rows.
Grid.Col
span
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
default:"1"
Number of columns this cell spans.
Usage
Basic grid
<Grid cols={3} gap={4}>
<Card>Item 1</Card>
<Card>Item 2</Card>
<Card>Item 3</Card>
</Grid>
Column spanning
<Grid cols={12} gap={4}>
<Grid.Col span={8}>
<Article />
</Grid.Col>
<Grid.Col span={4}>
<Sidebar />
</Grid.Col>
</Grid>
Custom gaps
<Grid cols={4} gapX={6} gapY={8}>
{products.map(product => (
<ProductCard key={product.id} {...product} />
))}
</Grid>
Two-column layout
<Grid cols={2} gap={6}>
<div>
<Heading>Left Column</Heading>
<Text>Content...</Text>
</div>
<div>
<Heading>Right Column</Heading>
<Text>Content...</Text>
</div>
</Grid>
Complex layout
<Grid cols={12} gap={4}>
<Grid.Col span={12}>
<Header />
</Grid.Col>
<Grid.Col span={3}>
<Navigation />
</Grid.Col>
<Grid.Col span={6}>
<MainContent />
</Grid.Col>
<Grid.Col span={3}>
<Sidebar />
</Grid.Col>
<Grid.Col span={12}>
<Footer />
</Grid.Col>
</Grid>
Layout Examples
Dashboard layout
<Grid cols={12} gap={6}>
<Grid.Col span={12}>
<Stats />
</Grid.Col>
<Grid.Col span={8}>
<RevenueChart />
</Grid.Col>
<Grid.Col span={4}>
<ActivityFeed />
</Grid.Col>
<Grid.Col span={6}>
<TopProducts />
</Grid.Col>
<Grid.Col span={6}>
<RecentOrders />
</Grid.Col>
</Grid>
Product grid
<Grid cols={4} gap={4}>
{products.map(product => (
<Card key={product.id}>
<Image src={product.image} />
<Heading size="sm">{product.name}</Heading>
<Text>${product.price}</Text>
<Button>Add to Cart</Button>
</Card>
))}
</Grid>
Responsive grid with Tailwind
<Grid
cols={12}
gap={4}
className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
>
<Card>Item 1</Card>
<Card>Item 2</Card>
<Card>Item 3</Card>
</Grid>
Masonry-style layout
<Grid cols={3} gap={4}>
<Grid.Col span={2}>
<Card className="h-64">Large card</Card>
</Grid.Col>
<Grid.Col span={1}>
<Card className="h-64">Small card</Card>
</Grid.Col>
<Grid.Col span={1}>
<Card className="h-32">Short card</Card>
</Grid.Col>
<Grid.Col span={2}>
<Card className="h-32">Wide card</Card>
</Grid.Col>
</Grid>
Best Practices
- Use
cols={12} for maximum flexibility with Grid.Col spanning
- Use lower column counts (2-4) for simpler, uniform grids
- Prefer
SimpleGrid for responsive grids without manual column spanning
- Use
gapX and gapY separately when you need different horizontal and vertical spacing
- Combine with Tailwind responsive classes for mobile-first layouts
- Ensure column spans add up correctly to avoid layout issues