v150 · CSS · demo

Headline Equalizer

Article cards with category pills. The same set of pills laid out with flex-wrap: wrap vs flex-wrap: balance — side-by-side within each card so you can see the difference clearly.

live flex-wrap probe

Check whether this CSS engine accepts flex-wrap: balance. When it does not, the balanced panels keep using the wrapped fallback so the comparison stays readable.

Probe has not run yet.

card width inspector

Resize the article cards and change how many labels each story renders. The row counters below each panel update from the actual layout boxes, so you can see when the greedy wrap leaves an uneven final row.

No custom labels added.
Layout metrics will appear after the cards render.
/* The one-line difference */

.pills-wrap    { flex-wrap: wrap;    }
.pills-balance { flex-wrap: wrap;    } /* fallback */

@supports (flex-wrap: balance) {
  .pills-balance { flex-wrap: balance; }
}

/* Both share the same base styles */
.pills {
  display: flex;
  gap: 0.5rem;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗