Skip to main content

Interface: GridProps

Defined in: components/Grid/Grid.tsx:59

Props for the Grid component.

Extends​

  • Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className">

Properties​

align?​

optional align?: BoxAlignment

Defined in: components/Grid/Grid.tsx:89

Block-axis alignment of items within their tracks (align-items).

Default​

'stretch'

children?​

optional children?: ReactNode

Defined in: components/Grid/Grid.tsx:93

The grid items.

Overrides​

Omit.children

columns?​

optional columns?: number

Defined in: components/Grid/Grid.tsx:69

Number of equal-fraction columns (repeat(N, minmax(0, 1fr))). A structural integer, not a length — there is no raw track template. Ignored when minColumnWidth is set (responsive auto-fit takes over).

Default​

1

gap?​

optional gap?: GapScaleStep

Defined in: components/Grid/Grid.tsx:87

Space between tracks (row and column), from the gap scale. There is no raw-length vocabulary — rhythm always comes from the scale.

Default​

'md'

justify?​

optional justify?: BoxAlignment

Defined in: components/Grid/Grid.tsx:91

Inline-axis alignment of items within their tracks (justify-items).

Default​

'stretch'

minColumnWidth?​

optional minColumnWidth?: GridMinColumnWidth

Defined in: components/Grid/Grid.tsx:76

Make the grid responsive: fit as many equal columns as the container allows, each at least this wide, reflowing the count automatically (repeat(auto-fit, minmax(…, 1fr))). Takes a named threshold, not a length. When set, it overrides columns.

rows?​

optional rows?: number

Defined in: components/Grid/Grid.tsx:81

Number of equal-fraction rows. Omit to let rows size to content (the common case); set it only for explicit row grids.