Skip to content
Theme UI
GitHub

Grid

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

import { Grid } from 'theme-ui'
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box

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.

PropDescription
widthMinimum width of child elements
gapSpace between child elements
columnsNumber of (equally-sized) columns, or string with grid syntax for the layout (cannot be used in conjunction with the width prop)
repeatMode for column sizing, used in conjunction with the width prop. Can either be fit or fill (fit is default)

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.

Edit the page on GitHub
Previous:
Flex
Next:
Button