Wrap

Wrap is a layout component that adds a defined space between its children. It wraps its children automatically if there isn't enough space to fit any more in the same row.

Think of it as a smarter flex-wrap with spacing support. It works really well with things like dialog buttons, tags, and chips.

chakra ui pro

Import#

import { Wrap, WrapItem } from "@chakra-ui/react"
  • Wrap: Wrap composes the Box component and renders a <ul> tag
  • WrapItem: WrapItem composes the Box component and renders the HTML <li> tag

Usage#

In the example below, you see that the last Box wrapped to the next line.

<Wrap>
<WrapItem>
<Center w="180px" h="80px" bg="red.200">
Box 1
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="green.200">
Box 2
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="tomato">
Box 3
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blue.200">
Box 4
</Center>
</WrapItem>
</Wrap>

Change the spacing#

Pass the spacing prop to apply consistent spacing between each child, even if it wraps.

Pro Tip: You can pass responsive values for the spacing.

<Wrap spacing="30px">
<WrapItem>
<Center w="180px" h="80px" bg="red.200">
Box 1
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="green.200">
Box 2
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="tomato">
Box 3
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blue.200">
Box 4
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blackAlpha.500">
Box 5
</Center>
</WrapItem>
</Wrap>

Change the alignment#

Pass the align prop to change the alignment of the child along the cross axis.

<Wrap spacing="30px" align="center">
<WrapItem>
<Center w="180px" h="80px" bg="red.200">
Box 1
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="40px" bg="green.200">
Box 2
</Center>
</WrapItem>
<WrapItem>
<Center w="120px" h="80px" bg="tomato">
Box 3
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="40px" bg="blue.200">
Box 4
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blackAlpha.500">
Box 5
</Center>
</WrapItem>
</Wrap>

Pass the justify prop to change the alignment of the child along the main axis.

<Wrap spacing="30px" justify="center">
<WrapItem>
<Center w="180px" h="80px" bg="red.200">
Box 1
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="green.200">
Box 2
</Center>
</WrapItem>
<WrapItem>
<Center w="120px" h="80px" bg="tomato">
Box 3
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blue.200">
Box 4
</Center>
</WrapItem>
<WrapItem>
<Center w="180px" h="80px" bg="blackAlpha.500">
Box 5
</Center>
</WrapItem>
</Wrap>

Props#

Wrap Props#

Wrap extends Box, so you can pass all Box props in addition to these:

align

Description

The `align-items` value (for main axis alignment)

Type
SystemProps["alignItems"]

direction

Description

The `flex-direction` value

Type
SystemProps["flexDirection"]

justify

Description

The `justify-content` value (for cross-axis alignment)

Type
SystemProps["justifyContent"]

shouldWrapChildren

Description

If true, the children will be wrapped in a WrapItem

Type
boolean

spacing

Description

The space between the each child (even if it wraps)

Type
SystemProps["margin"]

WrapItem Props#

WrapItem composes the Box component.

Edit this page

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel