Wrap

Used to add space between elements and wraps automatically if there isn't enough space.

AI TipWant to skip the docs? Use the MCP Server

Badge 1Badge 2Badge 3

Usage

By default, Wrap applies display: flex, flex-wrap: wrap, and gap: 8px to its children.

import { Wrap, WrapItem } from "@chakra-ui/react"

<Wrap>
  <div />
  <div />
</Wrap>

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

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

Box 1

Box 2

Box 3

Box 4

Box 5

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

Box 1

Box 2

Box 3

Box 4

Box 5

Pass the rowGap and columnGap props to apply a consistent spacing between the rows and columns.

Use responsive values for the gap, rowGap, and columnGap props to apply responsive spacing between each child.