Layout

Grid

A responsive grid without breakpoints: as many columns as fit the minimum width.

import { Grid } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Auto-fit columns

Even

Pro

Elegant

Flat

Kendall

Macchiato

grid/auto.tsx

import { Card, CardContent, Grid } from '@jsonresume/ui';

export default function GridAuto() {
  return (
    <Grid minColumnWidth="10rem" gap={4}>
      {['Even', 'Pro', 'Elegant', 'Flat', 'Kendall', 'Macchiato'].map(
        (name) => (
          <Card key={name} tone="subtle">
            <CardContent>{name}</CardContent>
          </Card>
        )
      )}
    </Grid>
  );
}

Stretch to fill

Default

One

Two

stretch

One

Two

Show code

grid/stretch.tsx

import { Card, CardContent, Grid, Stack, Text } from '@jsonresume/ui';

// Default (auto-fill) keeps column widths steady and leaves empty tracks;
// stretch (auto-fit) lets a few items fill the row.
export default function GridStretch() {
  return (
    <Stack gap={4}>
      <Text size="xs" tone="muted">
        Default
      </Text>
      <Grid minColumnWidth="10rem" gap={4}>
        <Card tone="subtle">
          <CardContent>One</CardContent>
        </Card>
        <Card tone="subtle">
          <CardContent>Two</CardContent>
        </Card>
      </Grid>
      <Text size="xs" tone="muted">
        stretch
      </Text>
      <Grid minColumnWidth="10rem" gap={4} stretch>
        <Card tone="subtle">
          <CardContent>One</CardContent>
        </Card>
        <Card tone="subtle">
          <CardContent>Two</CardContent>
        </Card>
      </Grid>
    </Stack>
  );
}

Accessibility

Items flow in reading order at every width.

Props

<Grid>

Also accepts the attributes of the element Grid renders.
Prop	Type	Default	Description
asChild	boolean	–	Render as the single child element instead of a <div>.
gap	012345681012	6	Style variant.
minColumnWidth	string	–	Minimum column width; the grid fits as many columns as it can. Defaults to 16rem.
stretch	boolean	–	Style variant.