Wrap

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

Badge 1

Badge 2

Badge 3

Usage

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

import { Wrap, WrapItem } from "chakra-ui-solid";

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

Box 1

Box 2

Box 3

Box 4

Box 5

Justify

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

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.

Props

WrapProps
Prop	Default	Type
`direction`	—	`SystemStyleObject['flexDirection']` Shorthand for `flexDirection`.

Plus everything in WrapProperties, Omit<HTMLChakraProps<"div">, "direction"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

WrapItemProps

Adds no prop of its own. It takes HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.