Grid

Equal-width grid. With columns the count is fixed; otherwise it is intrinsic (auto-fill from minColumnWidth), so it reflows by the space it gets without breakpoints.

Import

import { Grid } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/grid.

Usage

<Grid look={Stack} />

Props

Prop	Type	Default	Description
columns	number		Fixed number of equal columns. Without it the grid fits as many columns as minColumnWidth allows.
minColumnWidth	string	"16rem"	Narrowest a column may get before the grid drops one (any CSS length). Defaults to 16rem.
gap	"sm" | "md" | "lg" | "xs" | "none" | "xl"	"md"	Space between cells. Defaults to md.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Stack States
• Stack Solid
• Stack Narrow
• Mosaic States
• Mosaic Solid
• Mosaic Narrow
• Character States
• Character Paper
• Character Narrow
• Statement States
• Statement Solid
• Statement Narrow
• By Name
• Intrinsic
• Fixed Columns

Source

packages/ui/src/containers/grid/grid.tsx