Cluster

wf-cluster is a horizontal grouping primitive built on flex wrap. Items sit side by side and wrap to the next line when there is no more room — no media queries needed. Gap, alignment, and justification are all controlled with modifier classes.

Basic Cluster

Default Cluster

Items line up horizontally and wrap when the container runs out of space.

Item 1

Item 2

Item 3

Item 4

Item 5

<div class="wf-cluster">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Gap Scale

Controlling Item Spacing

Combine any wf-gap-* modifier with wf-cluster to tune density per layout block.

wf-gap-2

A

B

C

D

wf-gap-5

A

B

C

D

wf-gap-xl

A

B

C

D

<div class="wf-cluster wf-gap-2">...</div>
<div class="wf-cluster wf-gap-5">...</div>
<div class="wf-cluster wf-gap-xl">...</div>

Cross-Axis Alignment

Items Start wf-items-start

Children align to the top of the row.

Short

Tall

Medium

<div class="wf-cluster wf-items-start">...</div>

Items Center default

Children align to the vertical midpoint — the default cluster behavior.

Short

Tall

Medium

<div class="wf-cluster wf-items-center">...</div>

Items End wf-items-end

Children align to the bottom of the row.

Short

Tall

Medium

<div class="wf-cluster wf-items-end">...</div>

Items Baseline wf-items-baseline

Aligns children by their text baseline — useful when mixing font sizes.

Small text

Large text

Normal

<div class="wf-cluster wf-items-baseline">...</div>

Main-Axis Justification

Justify Start wf-justify-start

Items pack toward the start of the row.

A

B

C

<div class="wf-cluster wf-justify-start">...</div>

Justify Center wf-justify-center

Items center along the row.

A

B

C

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

Justify Between wf-justify-between

Free space is distributed between items — first and last items sit at the edges.

A

B

C

<div class="wf-cluster wf-justify-between">...</div>

Justify End wf-justify-end

Items pack toward the end of the row.

A

B

C

<div class="wf-cluster wf-justify-end">...</div>

Per-Item Self-Alignment

Individual Overrides with wf-self-*

Apply wf-self-* to a single child to override the cluster's cross-axis alignment for that item only.

self-start

center (default)

self-end

self-stretch

<div class="wf-cluster wf-items-center">
  <div class="wf-self-start">self-start</div>
  <div>center (default)</div>
  <div class="wf-self-end">self-end</div>
  <div class="wf-self-stretch">self-stretch</div>
</div>

Class Reference

All modifier classes available on .wf-cluster

Class Name	Type	Description
wf-cluster	Base	Flex wrap container. Items align center by default with --wf-space-4 gap.
wf-gap-1 … wf-gap-8	Spacing	Numeric gap scale between items.
wf-gap-3xs … wf-gap-5xl	Spacing	Semantic gap scale between items.
wf-items-start / -center / -end / -stretch / -baseline	Alignment	Cross-axis alignment for all children.
wf-justify-start / -center / -end / -between / -around	Justification	Main-axis distribution of children.
wf-self-start / -center / -end / -stretch / -baseline	Self	Overrides cross-axis alignment for a single child item.