Wrap

Wrap is a layout component used to add space between elements and wraps automatically if there isn't enough space.

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

Think of Wrap component as a flex box container with flex-wrap and spacing support. It works really well with things like dialog buttons, tags, and chips.

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>

<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>

<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>

<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>

<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 each child (even if it wraps)

Type

SystemProps["margin"]

spacingX

Description

The horizontal space between the each child (even if it wraps). Defaults to spacing if not defined.

Type

SystemProps["margin"]

spacingY

Description

The vertical space between the each child (even if it wraps). Defaults to spacing if not defined.

Type

SystemProps["margin"]

WrapItem Props

WrapItem composes the Box component.