Arranges items into responsive columns with one shared gap.
import { Card } from '@usefragments/ui';
import { Grid } from '@usefragments/ui';
<Grid columns={3} gap="md">
<Card>One</Card>
<Card>Two</Card>pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Import Grid once, then compose its parts with dot notation.
Grid.ItemUp to three tracks, never thinner than 14rem; tracks drop as the grid narrows.
import { Card } from '@usefragments/ui';
import { Grid } from '@usefragments/ui';
<Grid columns={3} minChildWidth="14rem" gap="md">
<Card>One</Card>
<Card>Two</Card>As many tracks as fit at the minimum width.
import { Card } from '@usefragments/ui';
import { Grid } from '@usefragments/ui';
<Grid columns="auto" minChildWidth="12rem" gap="md">
<Card>One</Card>
<Card>Two</Card>Grid.Item spans columns; colSpan="full" spans the row.
import { Card } from '@usefragments/ui';
import { Grid } from '@usefragments/ui';
<Grid columns={4} gap="md">
<Grid.Item colSpan={2}>
<Card>Spans two</Card>Two fields side by side, folding to one column below 14rem each.
import { Field } from '@usefragments/ui';
import { Grid } from '@usefragments/ui';
import { Input } from '@usefragments/ui';
<Grid columns={2} minChildWidth="14rem" gap="md">
<Field>Prop | Type | Default | Description |
|---|---|---|---|
alignItems | GridAlign | undefinedcenterstartendstretch | Not set | Vertical alignment of items within their cells |
children | React.ReactNode | Not set | Grid items and content |
className | string | undefined | Not set | Additional class name |
columns | "auto" | GridColumns | undefined | 1 | Column tracks: a count (1, 2, 3, 4, 6, 12) for that many equal minmax(0, 1fr) tracks, or "auto" to fit as many minChildWidth tracks as the width allows. With minChildWidth a count becomes a ceiling that drops tracks as the grid narrows. |
gap | GridGap | undefinedxssmmdlgnonexl | md | Space between tracks on the layout gap scale: 0, 4, 8, 12, 16, 24 |
Item.alignSelf | GridAlign | undefinedcenterstartendstretch | Not set | Override alignment for this item |
Item.children | React.ReactNode | Not set | — |
Item.className | string | undefined | Not set | — |
Item.colSpan | GridColSpan | undefined | Not set | Number of columns this item spans |
Item.rowSpan | GridRowSpan | undefined | Not set | Number of rows this item spans |
Item.style | React.CSSProperties | undefined | Not set | — |
Item.subgrid | boolean | "both" | "rows" | "columns" | undefined | Not set | Enable CSS subgrid so children align to parent grid tracks. - `true` or `"rows"` — children align to parent row tracks - `"columns"` — children align to parent column tracks - `"both"` — children align to both row and column tracks |
justifyItems | GridAlign | undefinedcenterstartendstretch | Not set | Horizontal alignment of items within their cells |
minChildWidth | string | undefined | Not set | Narrowest a track may get, as a CSS length. Defaults to the grid-cell measure for columns="auto"; with a count it turns the count into a ceiling. Measured against the grid's own width, never the viewport. |
style | React.CSSProperties | undefined | Not set | Inline styles |