Grid
A CSS Grid container for building grid-based layouts with columns, rows, and gap control.
import { Grid } from "@ninna-ui/layout"pnpm add @ninna-ui/layoutRequires @ninna-ui/core (auto-installed) + CSS setup.
Usage
Import and use the Grid component.
import { Grid } from "@ninna-ui/layout";
export default function Example() { return ( <Grid columns={3} gap="4"> <Card /> <Card /> <Card /> </Grid> );}Basic
Basic grid layout with 3 columns.
1
2
3
4
5
6
Columns
Control the number of columns.
columns=1
1
2
columns=2
1
2
3
4
columns=3
1
2
3
4
5
6
columns=4
1
2
3
4
5
6
7
8
columns=6
1
2
3
4
5
6
7
8
9
10
11
12
Gap Spacing
Control spacing between grid items.
gap="0"
1
2
3
4
5
6
gap="2"
1
2
3
4
5
6
gap="4"
1
2
3
4
5
6
gap="6"
1
2
3
4
5
6
gap="8"
1
2
3
4
5
6
Rows
Define explicit row counts.
rows=2, columns=3
1
2
3
4
5
6
rows=3, columns=2
1
2
3
4
5
6
Flow
Control how items flow in the grid.
flow="row"
1
2
3
4
5
6
flow="column"
1
2
3
4
5
6
flow="dense"
1
2
3
4
5
6
Use Cases
Common patterns using Grid.
Card Grid
Card 1
Description
Card 2
Description
Card 3
Description
Card 4
Description
Card 5
Description
Card 6
Description
Dashboard Layout
234
Users
468
Revenue
702
Orders
936
Growth
Photo Gallery
API Reference
Complete list of props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none' | 1 | Number of columns |
rows | 1 | 2 | 3 | 4 | 5 | 6 | 'none' | - | Number of rows |
gap | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '4' | Gap between items |
rowGap | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | - | Row gap (overrides gap) |
columnGap | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | - | Column gap (overrides gap) |
flow | 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense' | - | Grid flow direction |
className | string | - | Additional CSS classes |
Accessibility
- Grid is a pure layout component with no semantic meaning
- Use appropriate semantic HTML elements as children
- For data grids, consider using table elements