Grid
@cloudflare/kumo

Grid

A responsive grid layout component for organizing content into columns.

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"

1

2

variant="3up"

1

2

3

variant="4up"

1

2

3

4

 
// 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"

1

2

gap="sm"

1

2

gap="base" (default, responsive)

1

2

gap="lg"

1

2

 
<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:

VariantDescription

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

Grid

PropTypeDefaultDescription
childrenReactNode-Grid items to render.
classNamestring-Additional CSS classes merged via `cn()`.
idstring--
langstring--
titlestring--
mobileDividerboolean-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.