Components / Grid
Grid
An equal-column arrangement of same-shaped cards inside a sheet or card: paired charts, a side-by-side of two panels. Part of the Elle generative-UI catalog, so agents and developers compose the same primitive.
import { Grid } from '@layers/ui/grid'Rendered stock
House rules
- columns is 1 to 4 equal tracks; gap is sm (8px), md (16px), or lg (24px). Reach for these tokens, never a raw grid-cols/gap class pair.
- The column count is literal and does not step down — a Grid with columns={4} is four columns at 320px too. Use it where the content is wide enough to survive that, and reach for a purpose-built grid where it is not.
- Not for stat rows. StatCardGrid carries those: it picks its columns from the container width and the group size, which is exactly what this component cannot do.
- It sizes content inside a sheet or card, not the page; canvas and sheet layouts own page structure.
- Changes here reach Elle-generated sheets too; keep the API in lockstep with the catalog schema in @layers/ui-schema.