Components / Layout

Grid

Grid is a Box wired to CSS Grid. The columns prop is shorthand for repeat(n, 1fr); the templateColumns and templateRows props pass through to the underlying CSS.

Loading playground…

What it is

A <Box display="grid"> with conveniences for the common case. The columns prop expands to grid-template-columns: repeat(<n>, 1fr). templateColumns and templateRows take precedence when set — they pass through to the CSS property directly. gap and the other style props come from Box.

Install

Grid is exported from usemotif. No separate install.

example.tsx

import { Grid } from 'usemotif';

API

Grid

stable

function Grid(props: GridProps): JSX.Element

columnsnumber

Shorthand for `gridTemplateColumns: "repeat(<n>, 1fr)"`. Use when every column has the same width.

templateColumnsstring

Raw `grid-template-columns`. Wins over `columns` when both set. Pass any valid track list, e.g. `"200px 1fr auto"`.

templateRowsstring

Raw `grid-template-rows`.

…BoxPropsBoxProps

Every prop Box accepts. `display` is managed by Grid; `gap` works normally.

Examples

Uniform three-column grid:

example.tsx

<Grid columns={3} gap="$4">
<Card />
<Card />
<Card />
</Grid>

Responsive column count — single column on phones, three on desktops:

example.tsx

<Grid columns={{ base: 1, sm: 2, lg: 3 }} gap="$4">
{items.map((it) => <Card key={it.id} {...it} />)}
</Grid>

Explicit track list with a sidebar and a main column:

example.tsx

<Grid templateColumns="240px 1fr" gap="$6">
<Sidebar />
<Main />
</Grid>

Cross-platform notes

On web Grid uses CSS Grid through display: grid. On native CSS Grid is not part of the platform; Grid falls back to a flex-based approximation that respects columns and gap but does not support templateColumns or templateRows. Reach for Grid's track-list features only when the consuming surface is web.