Split

The .split class pushes two elements inside a layout to the edges of their container. It automatically wraps if needed.

Usage

The default direction for the .split class is a row.

<div class="split">
	<div>...</div>
	<div>...</div>
</div>

Direction

The .split layout uses display: flex under-the-hood. You can change the direction the layout using the .direction-column flex utility class.

The default direction for the .split class is a row.

<div class="split direction-column">
	<div>...</div>
	<div>...</div>
</div>

More Items

While .split was designed for two-element layouts, you can add more, and they’ll be spaced evenly apart.

This is useful for things like navigation menus with a logo, primary nav items, and secondary nav items.

<div class="split">
	<div>...</div>
	<div>...</div>
	<div>...</div>
</div>

Gap

You can adjust the amount of spacing between items using the .gap-* utility classes.

In a .split layout, this only affects the layout when items wrap or get very close together.

<div class="split gap-4xs">
	<div>...</div>
	<div>...</div>
</div>

Align Items

By default, items in a .split layout stretch to match the tallest child element.

You can adjust the vertical alignment with the .align-* utility classes.

.align-start

.align-center

.align-end

<div class="split align-start">
	<!-- ... -->
</div>

<div class="split align-center">
	<!-- ... -->
</div>

<div class="split align-end">
	<!-- ... -->
</div>