Grid

A CSS grid version of the Box component.

The <Grid /> component is a version of <Box /> that applies display: grid.

Inline

Use the inline prop to apply display: inline-grid to the element.

Column layout example

Achieve a repeating column layout by using the gridTemplateColumns prop.

Other props

<Grid /> supports all of the BoxProps from the box component (except for display and unrelated BaseFlexProps props), with the addition of inline. See props for a full list.

Responsive

It also supports the responsive prop syntax on most props. Try resizing your viewport to see the effects: