Components

Grid

Component for creating grid layouts.

<Grid columns="3" gap="3" width="auto">
<Box height="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
</Grid>

API Reference

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

Use these props to create grid layouts.

PropTypeDefault
asChild
boolean
false
display
Responsive<"none" | "inline-grid" | "grid">
No default value
columns
string
No default value
rows
string
No default value
flow
Responsive<"row" | "column" | "dense" | "row-dense" | "column-dense">
No default value
align
Responsive<"start" | "center" | "end" | "baseline" | "stretch">
No default value
justify
Responsive<"start" | "center" | "end" | "between">
No default value
gap
enum
No default value
gapX
enum
No default value
gapY
enum
No default value

The following props are shared between Box, Flex, Grid, Container and Section layout components.

PropTypeDefault
p
enum
No default value
px
enum
No default value
py
enum
No default value
pt
enum
No default value
pr
enum
No default value
pb
enum
No default value
pl
enum
No default value
position
Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">
No default value
inset
Responsive<"auto" | "0" | "50%" | "100%">
No default value
top
Responsive<"auto" | "0" | "50%" | "100%">
No default value
right
Responsive<"auto" | "0" | "50%" | "100%">
No default value
bottom
Responsive<"auto" | "0" | "50%" | "100%">
No default value
left
Responsive<"auto" | "0" | "50%" | "100%">
No default value
width
enum
No default value
height
enum
No default value
shrink
Responsive<"0" | "1">
No default value
grow
Responsive<"0" | "1">
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="9">
<DecorativeBox />
</Box>
<Box height="9">
<DecorativeBox />
</Box>
</Grid>
PreviousFlex