Components
Grid
CSS grid layout with a fixed column count or auto-responsive columns by min cell width.
Grid arranges children in a CSS grid. Give it a fixed columns count for a
predictable layout, or set minChildWidth (in pixels) for an auto-responsive
grid that fits as many equal columns as will hold cells of at least that width —
minChildWidth overrides columns. Spacing between cells uses the same gap
scale as Stack. Use it for card galleries, dashboards, and any equal-column
layout.
Example
Preview
Metrics
Reports
Billing
import { Grid } from '@officina/ui';
<Grid minChildWidth={220} gap={4}>
<Card />
<Card />
<Card />
</Grid>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | number | — | Fixed column count; ignored when `minChildWidth` is set. |
| gap | enum | 3 | Spacing scale between grid cells. |
| minChildWidth | number | — | Min cell width (px) for an auto-responsive grid. Overrides `columns`. |