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 cs-cluster with a cs-gap-* class to change the spacing and a cs-align-items-* class to change how items align on the cross axis.
<divclass="cs-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>.cs-cluster div:empty:nth-child(3n){min-inline-size: 6rem;}.cs-cluster div:empty:nth-child(3n + 2){min-inline-size: 8rem;}</style>
Examples
Clusters are great for inline lists and aligning items of varying sizes.
By default, items are centered in the block direction of the cs-cluster container. Add any cs-align-items-* class to change how items line up in the block direction.
