Wrap

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

    Source@chakra-ui/layout

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>

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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel