The Wrap component itself is composed of two main sub-components: Wrap and WrapItem. The Wrap component is built on top of the Box component and renders a
<ul> tag, while the WrapItem component is also based on the Box component and renders an HTML
Wrap: a high-level component that acts as the container for the wrapped items and provides the necessary layout and wrapping functionality.
WrapItem: sub-component of the Wrap component, which is used to wrap individual items within the Wrap component. Each WrapItem represents an item to be wrapped and positioned within the container.
These components can be imported as follows:
In this example, we create a Wrap component and nest WrapItem components inside it. Each WrapItem contains a Center component that acts as a container for our content. The Wrap component ensures that the boxes wrap to the next line when there isn't enough space horizontally.
Customizing WrapItem Spacing
Customizing Wrap Justification
Customizing Wrap Alignment
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3