Stack

The .stack class creates a column layout where each direct child element is evenly spaced.

Usage

The most common use for a .stack layout is long-form writing, where you want every time to be evenly spaced. Controlling the space of items in a <form> is another common use.

<div class="stack">
	<div>Merlin</div>
	<div>Gandalf</div>
	<div>Radagast</div>
</div>

Gap

The .stack class uses display: flex under-the-hood.

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

.gap-4xs

.gap-6xl

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

<div class="stack gap-6xl">
	<!-- ... -->
</div>

Align Items

By default, items in a .stack layout stretch to fill the column.

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

.align-start

.align-center

.align-end

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

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

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