Balance Card Titles in a Responsive Grid

The Card-Grid Wrapping Problem

Picture a 3-up card grid with titles like "Detect performance regressions in production". On desktop the title might wrap as "Detect performance regressions in / production" — a single-word last line that looks ragged next to neighboring cards with cleaner wrapping. As the grid collapses to 2-up and 1-up at smaller breakpoints, every breakpoint introduces new orphans.

The Fix

.card-title {
  text-wrap: balance;
  font-size: 1.125rem;
  line-height: 1.3;
  max-width: 28ch;
}

With balance applied, the same title becomes "Detect performance / regressions in production" — two roughly-equal lines.

Why it works for grids specifically

Card grids re-flow at every breakpoint, and balance re-runs on every layout change. Unlike a JavaScript-balanced solution that needs to listen for resize events, the CSS version is recomputed by the browser's layout engine for free.

Caveat: long titles

If your CMS occasionally produces 10-word titles, balance will silently disable past 6 wrapped lines. For mostly-short titles with rare long ones, combine balance with a sensible line-clamp to truncate the worst cases:

.card-title {
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This keeps cards visually consistent: most titles get balanced wrapping, edge-case long titles get truncated with an ellipsis.