Grid

Item 1

First grid item

Item 2

Second grid item

<Grid variant="2up" gap="base">
  <GridItem>
    <Surface className="rounded-lg p-4">
      <Text bold>Item 1</Text>
      <Text variant="secondary">First grid item</Text>
    </Surface>
  </GridItem>
  <GridItem>
    <Surface className="rounded-lg p-4">
      <Text bold>Item 2</Text>
      <Text variant="secondary">Second grid item</Text>
    </Surface>
  </GridItem>
</Grid>

Installation

import { Grid, GridItem } from "@cloudflare/kumo";

Grid Variants

The Grid component supports multiple column layouts that adapt responsively across breakpoints.

variant="2up"

variant="3up"

variant="4up"

// 2up: 1 column on mobile, 2 on medium+
<Grid variant="2up">...</Grid>

// 3up: 1 column mobile, 2 medium, 3 large
<Grid variant="3up">...</Grid>

// 4up: Progressive columns at each breakpoint
<Grid variant="4up">...</Grid>

Asymmetric Layouts

Use asymmetric variants for sidebar/main content layouts.

variant="2-1" (66% / 33%)

Main Content

Two-thirds width

Sidebar

One-third width

variant="1-2" (33% / 66%)

Sidebar

One-third width

Main Content

Two-thirds width

// 2-1: Two-thirds / one-third split (66%/33%)
<Grid variant="2-1">
  <GridItem>Main content</GridItem>
  <GridItem>Sidebar</GridItem>
</Grid>

// 1-2: One-third / two-thirds split (33%/66%)
<Grid variant="1-2">
  <GridItem>Sidebar</GridItem>
  <GridItem>Main content</GridItem>
</Grid>

Gap Sizes

Control the spacing between grid items with the gap prop.

gap="none"

gap="sm"

gap="base" (default, responsive)

gap="lg"

<Grid variant="side-by-side" gap="none">...</Grid>
<Grid variant="side-by-side" gap="sm">...</Grid>
<Grid variant="side-by-side" gap="base">...</Grid>
<Grid variant="side-by-side" gap="lg">...</Grid>

Mobile Dividers

Add dividers between items on mobile with the mobileDivider prop (only works with the 4up variant).

Item 1

Has divider on mobile

Item 2

Has divider on mobile

Item 3

Has divider on mobile

Item 4

Has divider on mobile

<Grid variant="4up" gap="base" mobileDivider>
  <GridItem>...</GridItem>
  <GridItem>...</GridItem>
  <GridItem>...</GridItem>
  <GridItem>...</GridItem>
</Grid>

All Variants

Reference for all available grid variants:

Variant	Description
`2up`	1 column mobile, 2 columns medium+
`side-by-side`	Always 2 columns
`2-1`	66%/33% split on medium+
`1-2`	33%/66% split on medium+
`1-3up`	1 column mobile, 3 columns large+
`3up`	1 mobile, 2 medium, 3 large
`4up`	Progressive: 1 → 2 → 3 → 4 columns
`6up`	2 mobile, up to 6 on XL
`1-2-4up`	1 mobile, 2 medium, 4 large

API Reference

Prop	Type	Default	Description
children	`ReactNode`	-	Grid items to render.
className	`string`	-	Additional CSS classes merged via `cn()`.
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
mobileDivider	`boolean`	-	Show dividers between grid items on mobile (only works with `"4up"` variant).
gap	`"none" \| "sm" \| "base" \| "lg"`	`"base"`	Gap size between grid items. - `"none"` — No gap - `"sm"` — 12px gap - `"base"` — Responsive gap (8px → 24px → 32px) - `"lg"` — 32px gap
variant	`"2up" \| "side-by-side" \| "2-1" \| "1-2" \| "1-3up" \| "3up" \| "4up" \| "6up" \| "1-2-4up"`	-	Responsive column layout variant. - `"2up"` — 1 col → 2 cols at md - `"side-by-side"` — Always 2 cols - `"2-1"` — 66%/33% split at md - `"1-2"` — 33%/66% split at md - `"3up"` — 1 → 2 → 3 cols - `"4up"` — 1 → 2 → 3 → 4 cols - `"6up"` — 2 → 3 → 4 → 6 cols - `"1-2-4up"` — 1 → 2 → 4 cols

GridItem

GridItem is a wrapper component for grid children. It accepts standard div props including className and children.