Grid

Arrange related specimens in responsive columns.

import photo from "../assets/photography/photo-01.jpg";

<Grid cols={2} colsSm={1} gap="var(--space-l)">
  <Figure src={photo} caption="Wide composition" ratio="3 / 2" />
  <Figure src={photo} caption="Square crop" ratio="1 / 1" />
</Grid>

Usage

Wrap prose or other components in Grid. Nested built-in components receive the current page’s brand, interface strings, and direction automatically.

<Grid cols={2}>
  <Figure caption="Front" />
  <Figure caption="Back" />
</Grid>

These figures render draft placeholders until you provide src. For image imports and captions, see Figure. The preview’s Code tab includes an image import relative to a content-root page; use your own asset and adjust the path for nested or localized content.

Examples

Arrange three specimens

Use cols to choose the column count from 48rem upward. This example uses the standard three-column layout and default spacing, then stacks its draft figures on smaller screens. The opening preview demonstrates two columns and a larger gap.

<Grid cols={3} colsSm={1}>
  <Figure caption="Front view" />
  <Figure caption="Side view" />
  <Figure caption="Detail view" />
</Grid>

Keep two columns on small screens

Set colsSm={2} to keep specimens side by side on narrow screens. A smaller spacing token brings them closer together.

import photo from "../assets/photography/photo-01.jpg";

<Grid cols={2} colsSm={2} gap="var(--space-xs)">
  <Figure src={photo} caption="Wide composition" ratio="3 / 2" />
  <Figure src={photo} caption="Square crop" ratio="1 / 1" />
</Grid>

Responsive behavior

Below 48rem, the grid uses colsSm; at 48rem and above, it uses cols. The breakpoint follows the available width of the browser viewport, including inside an embedded preview. Resize the page to compare the layouts.

Children render in document order. Use positive whole numbers for column counts and spacing tokens such as var(--space-l) for gaps.

API reference