The split layout with modern CSS

On Monday, I shared how Kelp UI implements the container layout pattern. And yesterday, we learned about the cluster layout.

Today, we’re going to look at another layout pattern in Kelp: the split. Let’s dig in!

The split layout

A split layout is when you have two elements in a section, and want to push them both to the edges of the layout.

A common example of this pattern would be a logo and nav items on a website header.

<div class="split">
	<a href="/">Kelp UI</a>
	<div>
		<ul><!-- Nav Items... --></ul>
	</div>
</div>

For this layout, we’ll again remove any margin on the direct child elements so that we can control that directly.

.split > * {
	margin: 0;
}

Then we’ll again use flexbox, this time with justify-content: space-between to push the two items apart from each other. We’ll also again use --gap variable for easy adjustment later.

.split {
	--gap: 1em;
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
}

This pattern can also be used with three items. You sometimes see this pattern where a header has a logo to start, so nav in the middle, and then some social media icons at the end.

<div class="split">
	<a href="/">Kelp UI</a>
	<div>
		<ul><!-- Nav Items... --></ul>
	</div>
	<div>
		<ul><!-- Social Icons... --></ul>
	</div>
</div>

Here’s a demo of the .split layout.

Stacks on stacks on stacks

Tomorrow, we’ll learn “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.

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.

Cheers,
Chris