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.

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#

Type

SystemProps["margin"]

WrapItem Props#

WrapItem composes the Box component.