Skip to main content Accessibility Feedback

Cluster

The .cluster class arranges elements in an evenly spaced, inline layout, and automatically wraps to the next line when needed.

Usage

It’s useful for things like image galleries, collections of tags, and so on.

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff
The magical secrets of the universe
Potions
Cauldron
Supercalifragilisticexpialidocious
<div class="cluster">
	<div class="callout">Merlin</div>
	<div class="callout">Gandalf</div>
	<div class="callout">Radagast and his animals</div>
	<div class="callout">Wand</div>
	<div class="callout">Sword</div>
	<div class="callout">Wizard Staff</div>
	<div class="callout">The magical secrets of the universe</div>
	<div class="callout">Potions</div>
	<div class="callout">Cauldron</div>
	<div class="callout">Supercalifragilisticexpialidocious</div>
</div>

Gap

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

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

.gap-4xs

Merlin
Gandalf
Radagast and his animals
Wand
Sword
Wizard Staff

.gap-6xl

Merlin
Gandalf
Radagast and his animals
Wand
Sword
<div class="cluster gap-4xs">
	<!-- ... -->
</div>

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

Align Items

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

Merlin
Gandalf
Radagast
and his
animals

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

.align-start

Merlin
Gandalf
Radagast
and his
animals

.align-center

Merlin
Gandalf
Radagast
and his
animals

.align-end

Merlin
Gandalf
Radagast
and his
animals
<div class="cluster align-start">
	<!-- ... -->
</div>

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

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

Justify Content

By default, items in a .cluster layout justify to the start of the primary axis.

You can adjust the justification with the .justify-* utility classes.

.justify-end

Merlin
Gandalf
Radagast and his animals

.justify-center

Merlin
Gandalf
Radagast and his animals
<div class="cluster justify-end">
	<!-- ... -->
</div>

<div class="cluster justify-center">
	<!-- ... -->
</div>