Wrap

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

Panda

import { Wrap, WrapItem } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

const Demo = () => {
  return (
    <Wrap>
      <WrapItem>
        <DecorativeBox h="20" />
      </WrapItem>
      <WrapItem>
        <DecorativeBox h="20" />
      </WrapItem>
      <WrapItem>
        <DecorativeBox h="20" />
      </WrapItem>
    </Wrap>
  )
}

Usage

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

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

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

import { Wrap, WrapItem } from "styled-system/jsx" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Wrap> <WrapItem> <DecorativeBox h="20" /> </WrapItem> <WrapItem> <DecorativeBox h="20" /> </WrapItem> <WrapItem> <DecorativeBox h="20" /> </WrapItem> </Wrap> ) }

Examples

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

import { Wrap } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const WrapWithGap = () => (
  <Wrap gap="5">
    {Array.from({ length: 10 }).map((_, index) => (
      <DecorativeBox key={index} h="12" w="12" />
    ))}
  </Wrap>
)

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

import { Wrap } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const WrapWithAlign = () => (
  <Wrap align="center">
    {Array.from({ length: 10 }).map((_, index) => (
      <DecorativeBox key={index} h="12" w="12" />
    ))}
  </Wrap>
)

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

import { Wrap } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const WrapWithJustify = () => (
  <Wrap justify="space-between">
    {Array.from({ length: 10 }).map((_, index) => (
      <DecorativeBox key={index} h="12" w="12" />
    ))}
  </Wrap>
)

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

import { Wrap } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const WrapWithRowAndColumnGap = () => (
  <Wrap rowGap="4" columnGap="8">
    {Array.from({ length: 10 }).map((_, index) => (
      <DecorativeBox key={index} h="12" w="12" />
    ))}
  </Wrap>
)

Wrap

Usage

Examples

Gap or Spacing

Alignment

Justify

Row and Column Gap

Wrap

Usage

Examples

Gap or Spacing

Alignment

Justify

Row and Column Gap