Skip to main content
ninna-ui

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/layout

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

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

PropTypeDefaultDescription
asElementType-Semantic HTML element to render
columnsGridColumns | ResponsiveValue<GridColumns>1Number of columns or breakpoint map
rows1 | 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
align'start' | 'center' | 'end' | 'stretch' | 'baseline'-Align grid items on the cross axis
classNamestring-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