Grid

The Grid component uses CSS Grid to arrange child elements in a tiled layout with automatic responsive behavior.

Import

import { Grid } from 'theme-ui'

Usage

<Grid columns={3} gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Props

ResponsiveValue<string | number>

Number of columns for the grid layout. Cannot be used with the width prop.

{/* Fixed 3 columns */}
<Grid columns={3}>

{/* Responsive columns */}
<Grid columns={[2, 3, 4]}>

ResponsiveValue<string | number>

Minimum width of child elements. The grid will automatically calculate columns using auto-fit or auto-fill. Cannot be used with the columns prop.

{/* Minimum 200px wide items */}
<Grid width={200}>

{/* Responsive minimum widths */}
<Grid width={[150, 200, 250]}>

ResponsiveValue<string | number>

default:"3"

Space between grid items. Maps to theme space values.

<Grid gap={4}>
<Grid gap={[2, 3, 4]}>

'fit' | 'fill'

default:"'fit'"

Controls auto-repeat behavior:

fit: Grid tracks collapse if not filled
fill: Grid tracks maintain size even if empty

<Grid width={200} repeat="fill">

ThemeUIStyleObject

Additional theme-aware styles.

string

Apply a variant from theme.grids.

Inherited Props

Grid extends Box and accepts all Box props including spacing and color utilities.

Examples

Fixed Columns

<Grid columns={3} gap={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</Grid>

Responsive Columns

<Grid columns={[1, 2, 3]} gap={4}>
  <div>Stacks on mobile, 2 columns on tablet, 3 on desktop</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Auto-fit Width

<Grid width={200} gap={3}>
  <div>Automatically fits as many 200px columns as possible</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

Responsive Gap

<Grid columns={3} gap={[2, 3, 4]}>
  <div>Gap increases with screen size</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Custom Grid Template

<Grid
  sx={{
    gridTemplateColumns: '1fr 2fr 1fr',
    gap: 3,
  }}
>
  <div>Sidebar</div>
  <div>Main (2x width)</div>
  <div>Sidebar</div>
</Grid>

Core

Styling

Color Modes

Components

Packages

Import

Usage

Props

Inherited Props

Examples

Fixed Columns

Responsive Columns

Auto-fit Width

Responsive Gap

Custom Grid Template

​Import

​Usage

​Props

​Inherited Props

​Examples

​Fixed Columns

​Responsive Columns

​Auto-fit Width

​Responsive Gap

​Custom Grid Template

Import

Usage

Props

Inherited Props

Examples

Fixed Columns

Responsive Columns

Auto-fit Width

Responsive Gap

Custom Grid Template