Grid

stable

CSS Grid layout container with responsive columns

import { Grid } from "@nodus/design-system"

CELL 1

CELL 2

CELL 3

CELL 4

CELL 5

CELL 6

Loading demo…

Props

Prop	Type	Default	Description
`columns`	`number \| string`	—	Grid columns (number → repeat(n, 1fr))
`rows`	`number \| string`	—	Grid rows (number → repeat(n, 1fr))
`gap`	`SpaceToken \| string`	—	Gap between cells
`flow`	`CSSProperties['gridAutoFlow']`	—	Auto-flow direction
`align`	`CSSProperties['alignItems']`	—	Row alignment
`inline`	`boolean`	—	Use inline-grid

columns

Type number | stringDefault —

Grid columns (number → repeat(n, 1fr))

rows

Type number | stringDefault —

Grid rows (number → repeat(n, 1fr))

gap

Type SpaceToken | stringDefault —

Gap between cells

flow

Type CSSProperties['gridAutoFlow']Default —

Auto-flow direction

align

Type CSSProperties['alignItems']Default —

Row alignment

inline

Type booleanDefault —

Use inline-grid

Metadataspace

MobileStacks / Scroll

Multi-column grids collapse to 1 column below sm breakpoint by default. Override with grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 as needed.

Design Rationale

This component was designed to express:

Flexbox layout container with gap and alignment

Generic box container with padding and border props

Was this helpful?