Library
/
Chakra
/
Layout
/
Wrap
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.
- Example
- Example
- Example
- Example
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",
)Layout component used to add space between elements and wrap automatically if there isn't enough space.
Event Triggers
See the full list of default event triggersItem of the Wrap component.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
