Cluster
The Cluster layout groups items that automatically wrap to create clusters, such as tag clouds, button groups, or navigation elements. This component uses flexbox with wrapping enabled to create flexible groupings of related items that flow naturally based on available space.
Example
<div class="cluster --justify-center" style="--layout-gap: 1rem">
<button>Home</button>
<button>About</button>
<button>Services</button>
<button>Contact</button>
</div>Custom Properties
| Property | Default | Description |
|---|---|---|
--layout-gap |
0 |
Gap between child elements |
--layout-items |
center |
Align items on cross axis |
--layout-justify |
start |
Justify content on main axis |
Class Utilities
| Class | Description |
|---|---|
.--start, .--end, .--center, .--stretch |
Controls cross-axis alignment of items |
.--justify-* |
Controls main-axis distribution of items (start, end, center, between, around) |