Open navigation

Grid

Layout primitive that arranges children on a CSS grid, with a fixed column count or auto-fill / auto-fit.

View in Storybook

Import

Usage

A

B

C

D

E

F

Fixed columns

A

B

C

D

E

F

G

H

A

B

C

D

E

F

G

H

Grid

Layout primitive that arranges children on a CSS grid, with a fixed column count or auto-fill / auto-fit.

View in Storybook

Import

Usage

A

B

C

D

E

F

Fixed columns

A

B

C

D

E

F

G

H

A

B

C

D

E

F

G

H

Auto-fill

With cols="auto-fill" or "auto-fit", minItemSize controls the minimum width of each cell so the grid reflows responsively.

A

B

C

D

E

F

G

H

Props

children?: Type: ReactNode; Default: -
cols?: Type: 1|2|3|4|5|6|'auto-fill'|'auto-fit'; Default: 'auto-fill'
gap?: Type: GapSize; Default: 'md'
minItemSize?: Type: 24|32|40|48|64

|80

Default: 48

Prop	Type	Default
`children?`	`ReactNode`	-
`cols?`	`1`\|`2`\|`3`\|`4`\|`5`\|`6`\|`'auto-fill'`\|`'auto-fit'`	`'auto-fill'`
`gap?`	`GapSize`	`'md'`
`minItemSize?`	`24`\|`32`\|`40`\|`48`\|`64`\|`80`	`48`

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>

import { Grid } from '@k8ordo/ui';

<Grid cols={3} gap="md">
  {items.map((label) => <Card>{label}</Card>)}
</Grid>

<Grid cols={2} gap="sm">…</Grid>
<Grid cols={4} gap="sm">…</Grid>

<Grid cols="auto-fill" minItemSize={32} gap="md">…</Grid>