Wrap

Import

import { Wrap, WrapItem } from 'styled-system/jsx'

Usage

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

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.

Props

The Wrap component accepts the following utility props in addition to style and factory props: