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
asChildbooleanfalse
displayResponsive<"none" | "inline-grid" | "grid">No default value
columnsstringNo default value
rowsstringNo default value
flowResponsive<"row" | "column" | "dense" | "row-dense" | "column-dense">No default value
alignResponsive<"start" | "center" | "end" | "baseline" | "stretch">No default value
justifyResponsive<"start" | "center" | "end" | "between">No default value
gapenumNo default value
gapXenumNo default value
gapYenumNo default value

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

PropTypeDefault
penumNo default value
pxenumNo default value
pyenumNo default value
ptenumNo default value
prenumNo default value
pbenumNo default value
plenumNo default value
positionResponsive<"static" | "relative" | "absolute" | "fixed" | "sticky">No default value
insetResponsive<"auto" | "0" | "50%" | "100%">No default value
topResponsive<"auto" | "0" | "50%" | "100%">No default value
rightResponsive<"auto" | "0" | "50%" | "100%">No default value
bottomResponsive<"auto" | "0" | "50%" | "100%">No default value
leftResponsive<"auto" | "0" | "50%" | "100%">No default value
widthenumNo default value
heightenumNo default value
shrinkResponsive<"0" | "1">No default value
growResponsive<"0" | "1">No default value
PreviousFlex