Grid- The Grid component.GridItem- The item for a grid.
import { Grid, GridItem } from "@dreamy-ui/react/rsc";Base usage of a grid.
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>