• Docs
  • Blog

    • 0.25.1

    • light

      dark

      system

      Switch mode

    • Cerberus

      Acheron

      Elysium

    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

    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>

    Examples

    Gap or Spacing

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

    Alignment

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

    Justify

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

    Row and Column Gap

    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

    • Edit this page on Github
    Cerberus Design System | Docs