Wrap- The Wrap component.
import { Wrap } from "@dreamy-ui/react/rsc";0
1
2
3
4
5
6
7
8
9
<Wrap>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>Use the gap prop to set the gap between items.
0
1
2
3
4
5
6
7
8
9
<Wrap gap={10}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>Use the align prop to set the alignment of the items.
0
1
2
3
4
5
6
7
8
9
<Wrap align="start">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize={index % 2 === 0 ? "150px" : "100px"} color="black/87">
{index}
</Flex>
))}
</Wrap>Use the justify prop to set the justification of the items.
0
1
2
3
4
5
6
7
8
9
<Wrap justify="center">
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>Use the rowGap and columnGap props to set the gap between rows and columns.
0
1
2
3
4
5
6
7
8
9
<Wrap rowGap={10} columnGap={5}>
{Array.from({ length: 10 }).map((_, index) => (
<Flex center key={index} bg="green.400" boxSize="100px" color="black/87">
{index}
</Flex>
))}
</Wrap>