[Go Make Things] The cluster layout with modern CSS

Tuesday, June 10, 2025

Yesterday, I shared how Kelp UI implements the container layout pattern. Today, we're going to look at another layout pattern in Kelp: the cluster.

Let's dig in!

The cluster layout

A cluster is when you have a bunch of elements of varying widths.

You want them to maintain their natural width, space them evenly apart, and let them wrap onto a new line if they're too big for the current one.

<div class="cluster">  	<div>Hello</div>  	<div>World!</div>  	<div>It sure is a lovely day today!</div>  	<div>Wouldn't you agree?</div>  	<div>Yes yes yes.</div>  	<div>Indeed!</div>  </div>

For this pattern, we first want to remove any margin that might exist on the direct child elements, since we'll be controlling spacing directly.

.cluster > * {  	margin: 0;  }

Next, we'll define our .cluster class styles.

This uses display: flex and flex-wrap: wrap to make the section into a Flexbox that automatically wraps based on content size. We also use gap to control spacing, and define a --gap variable to control this.

The --gap variable let's use easily use utility classes to modify the amount of spacing later if we want.

.cluster {  	--gap: 1em;  	display: flex;  	flex-wrap: wrap;  	gap: var(--gap);  }

Here's a demo of the .cluster layout.

What's next?

Tomorrow, we'll learn about the split layout. On Thursday, we'll look at the stack. And on Friday, we'll look at how Kelp uses utility classes to adjust spacing.

You can learn more about Kelp over at KelpUI.com.

Like this? A Go Make Things membership is the best way to support my work and help me create more free content.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

.