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>
This component is based on the div
element and supports common margin props.
Use these props to create grid layouts.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
display | Responsive<"none" | "inline-grid" | "grid"> | |
columns | string | |
rows | string | |
flow | Responsive<"row" | "column" | "dense" | "row-dense" | "column-dense"> | |
align | Responsive<"start" | "center" | "end" | "baseline" | "stretch"> | |
justify | Responsive<"start" | "center" | "end" | "between"> | |
gap | enum | |
gapX | enum | |
gapY | enum |
The following props are shared between Box, Flex, Grid, Container and Section layout components.
Prop | Type | Default |
---|---|---|
p | enum | |
px | enum | |
py | enum | |
pt | enum | |
pr | enum | |
pb | enum | |
pl | enum | |
position | Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky"> | |
inset | Responsive<"auto" | "0" | "50%" | "100%"> | |
top | Responsive<"auto" | "0" | "50%" | "100%"> | |
right | Responsive<"auto" | "0" | "50%" | "100%"> | |
bottom | Responsive<"auto" | "0" | "50%" | "100%"> | |
left | Responsive<"auto" | "0" | "50%" | "100%"> | |
width | enum | |
height | enum | |
shrink | Responsive<"0" | "1"> | |
grow | Responsive<"0" | "1"> |