reflex/docs/library/chakra/layout/wrap.md

---

components:

- rx.chakra.Wrap
- rx.chakra.WrapItem

---

Wrap

import reflex as rx

Wrap is a layout component that adds a defined space between its children.

It wraps its children automatically if there isn't enough space to fit any more in the same row. Think of it as a smarter flex-wrap with spacing support.

rx.chakra.wrap(
    rx.chakra.wrap_item(rx.chakra.box("Example", bg="lightgreen", w="100px", h="80px")),
    rx.chakra.wrap_item(rx.chakra.box("Example", bg="lightblue", w="200px", h="80px")),
    rx.chakra.wrap_item(rx.chakra.box("Example", bg="red", w="300px", h="80px")),
    rx.chakra.wrap_item(rx.chakra.box("Example", bg="orange", w="400px", h="80px")),
    width="100%",
    spacing="2em",
    align="center",
)