The Grid component uses CSS Grid to arrange child elements in a tiled layout with automatic responsive behavior.
import { Grid } from 'theme-ui'
<Grid columns={3} gap={4}>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Grid>
columns
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]}>
width
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]}>
gap
ResponsiveValue<string | number>
default:"3"
Space between grid items. Maps to theme space values.<Grid gap={4}>
<Grid gap={[2, 3, 4]}>
repeat
'fit' | 'fill'
default:"'fit'"
Controls auto-repeat behavior:
fit: Grid tracks collapse if not filledfill: Grid tracks maintain size even if empty
<Grid width={200} repeat="fill">
Additional theme-aware styles.
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>
