Grid

CSS grid layout component to arrange direct child elements in a tiled grid layout.

import { Grid } from 'theme-ui'

<Grid width={[128, null, 192]}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>
<Grid width={[128, null, 192]}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>

<Grid gap={2} columns={[2, null, 4]}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>
<Grid gap={2} columns={[2, null, 4]}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>

<Grid gap={2} columns={[2, '1fr 2fr']}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>
<Grid gap={2} columns={[2, '1fr 2fr']}>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
  <Box sx={{ bg: 'primary' }}>Box</Box>
  <Box sx={{ bg: 'muted' }}>Box</Box>
</Grid>

Props

The Grid component includes custom props for adjusting the grid layout. Each prop can use the responsive array syntax for mobile-first responsive styles.

Variants

You can define additional CSS grid layouts by adding variants to the theme.grids object. These styles can be used to create a wide variety of different reusable layouts.