Grid

Component for creating grid layouts.

<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
  <DecorativeBox />
</Grid>

API Reference

This component is based on the div element and supports common margin props.

Use these props to create grid layouts.

Prop	Type	Default
`as`	`"div" \| "span"`	`"div"`
`asChild`	`boolean`	No default value
`display`	`Responsive<"none" \| "inline-grid" \| "grid">`	No default value
`columns`	`Responsive<enum \| string>`	No default value
`rows`	`Responsive<enum \| string>`	No default value
`flow`	`Responsive<enum>`	No default value
`align`	`Responsive<enum>`	No default value
`justify`	`Responsive<"start" \| "center" \| "end" \| "between">`	No default value
`gap`	`Responsive<enum \| string>`	No default value
`gapX`	`Responsive<enum \| string>`	No default value
`gapY`	`Responsive<enum \| string>`	No default value

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

Prop	Type	Default
`p`	`Responsive<enum \| string>`	No default value
`px`	`Responsive<enum \| string>`	No default value
`py`	`Responsive<enum \| string>`	No default value
`pt`	`Responsive<enum \| string>`	No default value
`pr`	`Responsive<enum \| string>`	No default value
`pb`	`Responsive<enum \| string>`	No default value
`pl`	`Responsive<enum \| string>`	No default value
`width`	`Responsive<string>`	No default value
`minWidth`	`Responsive<string>`	No default value
`maxWidth`	`Responsive<string>`	No default value
`height`	`Responsive<string>`	No default value
`minHeight`	`Responsive<string>`	No default value
`maxHeight`	`Responsive<string>`	No default value
`position`	`Responsive<enum>`	No default value
`inset`	`Responsive<enum \| string>`	No default value
`top`	`Responsive<enum \| string>`	No default value
`right`	`Responsive<enum \| string>`	No default value
`bottom`	`Responsive<enum \| string>`	No default value
`left`	`Responsive<enum \| string>`	No default value
`overflow`	`Responsive<enum>`	No default value
`overflowX`	`Responsive<enum>`	No default value
`overflowY`	`Responsive<enum>`	No default value
`flexBasis`	`Responsive<string>`	No default value
`flexShrink`	`Responsive<enum \| string>`	No default value
`flexGrow`	`Responsive<enum \| string>`	No default value
`gridColumn`	`Responsive<string>`	No default value
`gridColumnStart`	`Responsive<string>`	No default value
`gridColumnEnd`	`Responsive<string>`	No default value
`gridRow`	`Responsive<string>`	No default value
`gridRowStart`	`Responsive<string>`	No default value
`gridRowEnd`	`Responsive<string>`	No default value

Examples

Columns

The columns prop can also accept an object to create responsive layouts.

This example will create a grid with 1 column on smaller screens and 2 columns from the medium breakpoint.

<Grid columns={{ initial: '1', md: '2' }} gap="3" width="auto">
  <Box height="64px">
    <DecorativeBox />
  </Box>
  <Box height="64px">
    <DecorativeBox />
  </Box>
</Grid>

PreviousFlex

NextContainer

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities

Grid

API Reference

Examples

Columns