Wrap

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

Source: packages/chakra-ui-solid/src/components/wrapChakra UI ↗

Badge 1

Badge 2

Badge 3

import type { JSX } from "@solidjs/web";
import { Box, Wrap } from "chakra-ui-solid";

const Badge = (props: { children: JSX.Element }) => (
  <Box
    bg="bg.emphasized"
    color="fg"
    px="2"
    py="0.5"
    borderRadius="l1"
    fontSize="xs"
    fontWeight="medium"
  >
    {props.children}
  </Box>
);

export default function WrapBasic() {
  return (
    <Wrap>
      <Badge>Badge 1</Badge>
      <Badge>Badge 2</Badge>
      <Badge>Badge 3</Badge>
    </Wrap>
  );
}

Usage

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

import { Wrap, WrapItem } from "chakra-ui-solid";

<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 "chakra-ui-solid";
import { For } from "solid-js";
import { DecorativeBox } from "../components/decorative-box";

export default function WrapWithGap() {
  return (
    <Wrap gap="5">
      <For each={Array.from({ length: 10 }, (_, index) => index)}>
        {() => <DecorativeBox h="12" w="12" />}
      </For>
    </Wrap>
  );
}

Alignment

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

Box 1

Box 2

Box 3

Box 4

Box 5

import { Center, Wrap, WrapItem } from "chakra-ui-solid";
import { For } from "solid-js";

export default function WrapWithAlign() {
  return (
    <Wrap gap="30px" align="center">
      <For each={Array.from({ length: 5 }, (_, index) => index)}>
        {(index) => (
          <WrapItem>
            <Center w="180px" h="80px" bg="red.muted">
              Box {index + 1}
            </Center>
          </WrapItem>
        )}
      </For>
    </Wrap>
  );
}

Justify

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

Box 1

Box 2

Box 3

Box 4

Box 5

import { Center, Wrap, WrapItem } from "chakra-ui-solid";
import { For } from "solid-js";

export default function WrapWithJustify() {
  return (
    <Wrap gap="30px" justify="center">
      <For each={Array.from({ length: 5 }, (_, index) => index)}>
        {(index) => (
          <WrapItem>
            <Center w="180px" h="80px" bg="red.muted">
              Box {index + 1}
            </Center>
          </WrapItem>
        )}
      </For>
    </Wrap>
  );
}

Row and Column Gap

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

import { Wrap } from "chakra-ui-solid";
import { For } from "solid-js";
import { DecorativeBox } from "../components/decorative-box";

export default function WrapWithRowColumnGap() {
  return (
    <Wrap rowGap={["0px", "24px"]} columnGap={["4px", "12px"]}>
      <For each={Array.from({ length: 10 }, (_, index) => index)}>
        {() => <DecorativeBox w="12" h="12" />}
      </For>
    </Wrap>
  );
}

Responsive

Use responsive values for the gap, rowGap, and columnGap props to apply responsive spacing between each child.

import { Wrap } from "chakra-ui-solid";
import { For } from "solid-js";
import { DecorativeBox } from "../components/decorative-box";

export default function WrapResponsive() {
  return (
    <Wrap gap={["12px", "24px"]} justify={["center", "flex-start"]}>
      <For each={Array.from({ length: 11 }, (_, index) => index)}>
        {() => <DecorativeBox h="12" w="12" />}
      </For>
    </Wrap>
  );
}