pnpm dlx dreamy add gridGrid is a wrapper component that provides a way to create responsive layouts.
1
2
3
1
2
3
<Grid color='white' columns={3}>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>1
2
3
<Grid color='white' columns={3}>
<GridItem colSpan={2} bg='green.400' p={2} color='black'>1</GridItem>
<GridItem rowSpan={2} bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>Use the minChildWidth prop to set the minimum width of the child and make grid responsive.
1
2
3
1
2
3
1
2
3
<Grid color='white' w='full' minChildWidth='150px'>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
<GridItem bg='green.400' p={2} color='black'>1</GridItem>
<GridItem bg='blue.400' p={2}>2</GridItem>
<GridItem bg='purple.400' p={2}>3</GridItem>
</Grid>