[Go Make Things] The stack layout in modern CSS

Thursday, June 12, 2025

Need a developer but don't need a full-time employee? I now offer subscription full stack engineering. Ship faster and build better systems. Pause or cancel any time.

This week, we learn how Kelp UI implements the container layout pattern, the cluster layout, and the split layout.

Today, we're going to look at one last layout pattern in Kelp: the stack. Let's dig in!

The stack layout

In Kelp, most elements have spacing applied them by default.

This lets you write content without having to worry about margins or padding between elements. You don't need to wrap everything in classes.

But sometimes, you want to more tightly control the spacing between things. A common example of this might be a form, where you want a controlled amount of space between each field.

This stack layout is perfect for that.

<form class="stack">  	<div>  		<label for="username">Username</label>  		<input type="text" id="username">  	</div>  	<div>  		<label for="password">Password</label>  		<input type="password" id="password">  	</div>  	<button>Login</button>  </form>

As always, we'll remove any margin from the direct child elements so that we can control that directly.

.stack > * {  	margin: 0;  }

Then, we'll use flexbox with a flex-direction of column to create a vertical layout (in top-to-bottom languages).

The --gap variable, as always, let's us control and easily modify the amount of spacing between our items.

.stack {  	--gap: 1em;  	display: flex;  	flex-direction: column;  	gap: var(--gap);  }

Here's a demo of the .stack layout.

Adjusting spacing

With all of these layouts, we've used the gap property to control the space between items. Tomorrow, I'll share the small assortment of utility classes Kelp uses to adjust that spacing.

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

Learn more about subscription full stack engineering. Ship faster and build better systems.

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

.