Wrap

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>

Examples

Gap or Spacing

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

Alignment

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

Justify

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

Row and Column Gap

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

Responsive

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