Function: Grid()
Grid(
__namedParameters):Element
Defined in: components/Grid/Grid.tsx:118
The 2D layout primitive — a CSS grid spaced from the FSL gap scale.
Entity = Structure. Use it for card grids, form field matrices, and any
two-dimensional arrangement. columns/rows are structural integers that
resolve to equal, overflow-safe fraction tracks; gap draws only from the
named scale, so grid rhythm stays consistent across a product. For a single
axis of flow, reach for Stack instead.
Each child is hosted in a data-part="item" wrapper that establishes
container-type: inline-size (ADR-011): the theme's container-fluid
scales (cqi clamps) resolve against the item's track width, so type and
spacing inside a narrow tile scale down instead of overflowing.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | GridProps |
Returns
Element
Example
// Fixed columns
<Grid columns={3} gap="lg">…</Grid>
// Responsive: as many ≥16rem columns as fit, reflowing automatically
<Grid minColumnWidth="sm" gap="lg">…</Grid>