Cluster creates flex items which cluster inline, until space no longer permits. At this point, items begin to wrap and display in block. The width of an item is determined by its content.
This layout is handy for grouping elements like navigation links, breadcrumbs, tags, etc. Use it by adding the .cluster class to an element with nested children.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--gutter, var(--space-size-1));
justify-content: var(--cluster-horizontal-alignment, flex-start);
align-items: var(--cluster-vertical-alignment, center);
}