Wrap

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

Panda

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

Prop	Type	Description
`rowGap`	`number \| string`	Gap between rows
`columnGap`	`number \| string`	Gap between columns
`justify`	`CSSProperties['justify-content']`	Justify content
`gap`	`number \| string`	Gap between children

On this page

Edit this page on Github

Cerberus Design System | Docs

import { DecorativeBox } from '@/app/components/decorative-box'
import { Wrap } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Wrap w="3/4">
      <DecorativeBox h="20" />
      <DecorativeBox h="20" w="calc(50% - 4px)" />
      <DecorativeBox h="20" w="calc(50% - 4px)" />
    </Wrap>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Wrap } from 'styled-system/jsx'

export function RowColDemo() {
  return (
    <Wrap rowGap="md" columnGap="xl" w="1/2">
      {Array.from({ length: 10 }).map((_, index) => (
        <DecorativeBox key={index} h="12" w="12" />
      ))}
    </Wrap>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Wrap } from 'styled-system/jsx'

export function AlignDemo() {
  return (
    <Wrap align="center" gap="md" w="3/4">
      {Array.from({ length: 5 }).map((_, index) => (
        <DecorativeBox key={index} h="80px" w="180px">
          Box {index + 1}
        </DecorativeBox>
      ))}
    </Wrap>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Wrap } from 'styled-system/jsx'

export function GapDemo() {
  return (
    <Wrap gap="5" w="3/4">
      {Array.from({ length: 12 }).map((_, index) => (
        <DecorativeBox key={index} h="12" w="12" />
      ))}
    </Wrap>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { Wrap } from 'styled-system/jsx'

export function JustifyDemo() {
  return (
    <Wrap justify="center" gap="md" w="3/4">
      {Array.from({ length: 5 }).map((_, index) => (
        <DecorativeBox key={index} h="80px" w="180px">
          Box {index + 1}
        </DecorativeBox>
      ))}
    </Wrap>
  )
}