レスポンシブグリッド内のカードタイトルをバランス調整

カードグリッド特有の折り返し問題

3カラムのカードグリッドを想像してください。タイトルが「本番環境のパフォーマンスリグレッションを検出する」のような長さの場合、デスクトップでは「本番環境のパフォーマンスリグレッションを / 検出する」のように、1単語だけが最終行に残ってしまうことがあります。隣のカードがすっきり折り返している中で、自分のカードだけがぼろぼろに見えるのです。さらにグリッドが小さいブレークポイントで2カラム・1カラムへと崩れていくたびに、新たなオーファンが生まれます。

解決策

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

balance を適用するだけで、同じタイトルが「本番環境のパフォーマンス / リグレッションを検出する」のように、ほぼ均等な2行へと再折り返しされます。

グリッドで効く理由

カードグリッドはブレークポイントごとに再フローしますが、balance はレイアウト変更のたびに再計算されます。リサイズイベントを listen する JavaScript のバランス調整と違い、CSS版はブラウザのレイアウトエンジンが無料で再計算してくれます。

注意：長いタイトル

CMS が時々10単語以上のタイトルを生成する場合、balance は6行を超えると静かに無効化されます。ほとんどが短いタイトルだが時々長いものが混じる、というケースには line-clamp と組み合わせて最悪のケースを切り詰めるのが現実解です：

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

これでカードの見栄えが揃います：ほとんどのタイトルはバランスよく折り返され、極端に長いものは省略記号で切り詰められます。