A cluster arranges its children inline with even spacing and wraps them onto a new line whenever the container runs out of room. Reach for it whenever you have a horizontal group of items of varying widths, like tag lists, button rows, inline metadata, or breadcrumb-style trails, and want the layout to stay tidy on every screen size without writing any media queries.
By default, cluster children are centered vertically. Pair wa-cluster with a wa-gap-* class to change the spacing and a wa-align-items-* class to change how items align on the cross axis.
<divclass="wa-cluster"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><!-- We'll vary the div sizes to show the flow of cluster elements --><style>.wa-cluster div:empty:nth-child(3n){min-inline-size: 6rem;}.wa-cluster div:empty:nth-child(3n + 2){min-inline-size: 8rem;}</style>
Examples
Link to This Section
Clusters are great for inline lists and aligning items of varying sizes.
By default, items are centered in the block direction of the wa-cluster container. You can add any of the following wa-align-items-* classes to an element with wa-cluster to specify how items are aligned in the block direction:
By default, the gap between cluster items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-cluster to specify the gap between items: