This content originally appeared on Go Make Things and was authored by Go Make Things
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 Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-06-10T14:30:00+00:00) The cluster layout with modern CSS. Retrieved from https://www.scien.cx/2025/06/10/the-cluster-layout-with-modern-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.