Introduction

A responsive CSS Grid layout primitive. Lay children out with an explicit column/row count, or let them auto-fit based on a minimum child width — both support responsive (per-breakpoint) values.

Usage

Fixed columns

import { Grid } from "../components/ui";

export default function MyPage() {
  return (
    <Grid columns={3} gap="4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Grid>
  );
}

Auto-fit by minimum child width

No breakpoints needed — columns are added or dropped automatically as the container resizes.

import { Grid } from "../components/ui";

export default function MyPage() {
  return (
    <Grid minChildWidth="120px" gap="4">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
    </Grid>
  );
}

Responsive column count

import { Grid } from "../components/ui";

export default function MyPage() {
  return (
    <Grid columns={{ base: 1, md: 2, lg: 3 }} gap="4">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Grid>
  );
}

Separate column and row gaps

import { Grid } from "../components/ui";

export default function MyPage() {
  return (
    <Grid columns={2} columnGap="6" rowGap="2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Grid>
  );
}

CMS Page Builder

This component is available as a grid block in the Page Builder (content/pages/*.json):

{
  "type": "grid",
  "columns": 3,
  "gap": "4",
  "children": [
    { "type": "text", "content": "1" },
    { "type": "text", "content": "2" },
    { "type": "text", "content": "3" }
  ]
}

Props

Prop	Type	Description
children	any	Content to be rendered inside the grid.
class	string	Custom CSS classes.

| columns | `Responsive<number \ | string>` | Number of columns (repeat(columns, minmax(0, 1fr))). Takes precedence over minChildWidth if both are set. | | rows | `Responsive<number \ | string>` | Number of rows (repeat(rows, minmax(0, 1fr))). | | minChildWidth | `Responsive<number \ | string>` | Auto-fits as many columns as fit, each at least this wide (repeat(auto-fit, minmax(width, 1fr))). Ignored when columns is set. |

| gap | `string \ | number \ | Responsive<...>` | Gap between cells. Defaults to "8px" unless columnGap/rowGap is set. | | columnGap | `string \ | number \ | Responsive<...>` | Gap between columns only. | | rowGap | `string \ | number \ | Responsive<...>` | Gap between rows only. |

Responsive<T> accepts either a plain value or a per-breakpoint object, e.g. { base: 1, md: 2, lg: 3 }, using the same breakpoints as the rest of the design system (base, sm, md, lg, xl, 2xl).