Component for creating grid layouts.
<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
<DecorativeBox />
</Grid>
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 | |
display | Responsive<"none" | "inline-grid" | "grid"> | |
columns | Responsive<enum | string> | |
rows | Responsive<enum | string> | |
flow | Responsive<enum> | |
align | Responsive<enum> | |
justify | Responsive<"start" | "center" | "end" | "between"> | |
gap | Responsive<enum | string> | |
gapX | Responsive<enum | string> | |
gapY | Responsive<enum | string> |
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> | |
px | Responsive<enum | string> | |
py | Responsive<enum | string> | |
pt | Responsive<enum | string> | |
pr | Responsive<enum | string> | |
pb | Responsive<enum | string> | |
pl | Responsive<enum | string> | |
width | Responsive<string> | |
minWidth | Responsive<string> | |
maxWidth | Responsive<string> | |
height | Responsive<string> | |
minHeight | Responsive<string> | |
maxHeight | Responsive<string> | |
position | Responsive<enum> | |
inset | Responsive<enum | string> | |
top | Responsive<enum | string> | |
right | Responsive<enum | string> | |
bottom | Responsive<enum | string> | |
left | Responsive<enum | string> | |
overflow | Responsive<enum> | |
overflowX | Responsive<enum> | |
overflowY | Responsive<enum> | |
flexBasis | Responsive<string> | |
flexShrink | Responsive<enum | string> | |
flexGrow | Responsive<enum | string> | |
gridColumn | Responsive<string> | |
gridColumnStart | Responsive<string> | |
gridColumnEnd | Responsive<string> | |
gridRow | Responsive<string> | |
gridRowStart | Responsive<string> | |
gridRowEnd | Responsive<string> |
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>