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.
The following props are shared between Box, Flex, Grid, Container and Section layout components.
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>