Grid

Component for creating grid layouts.

Usage

<Grid cols="3" gap="4" width="auto">
  <Box className="h-20">
    <DecorativeBox />
  </Box>
  <Box className="h-20">
    <DecorativeBox />
  </Box>
  <Box className="h-20">
    <DecorativeBox />
  </Box>
  <Box className="h-20">
    <DecorativeBox />
  </Box>
  <Box className="h-20">
    <DecorativeBox />
  </Box>
  <Box className="h-20">
    <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.

Prop	Type
asChild	boolean
cols	string
rows	string
align	`start` \| `center` \| `end` \| `baseline` \| `stretch`

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

Flex Heading