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> )}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>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>)On this page