CSS: 幅を固定してないのにgridのレイアウトが特定の要素だけ画面幅に応じて幅が均等にならなかったので対応方法MEMO

以下のようなマークアップに対して、

<div class="container">
  <article>
    this is short text
  </article>
    <article>
    this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooooooong word.
  </article>
    <article>
    this is short text
  </article>
    <article>
    this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooooooong word.
  </article>
 <div>

以下のようなCSS gridを使ったレイアウトを実装すると基本的には幅は均等になるはずと思ったのですが、

.container {
  max-width: 1200px;
  display: grid;
  grid-template-columns:  repeat(4, 1fr);
  gap: 8px;

  article {
    background-color: grey;
  }
}

width等で幅を固定してないのにgridのレイアウトが特定の要素だけ画面幅に応じて幅が均等にならずハマったので対応方法をメモしておきます📝

See the Pen CSS Grid: Even though the width is not fixed, the width of certain elements in the grid layout is not equal depending on the screen width. by madogiwa (@madogiwa0124) on CodePen.

結論

以下のようにword-break: break-all;が必要だった 📝

.container {
  max-width: 1200px;
  display: grid;
  grid-template-columns:  repeat(4, 1fr);
  gap: 8px;

  article {
    background-color: grey;
+   /* 長い英単語だと改行できずに幅が固定されてしまう。 */
+   word-break: break-all; 
  }
}

width等が設定されてなくてもword-breakの指定がないと、長い英単語があるとコンテナ幅が固定化されてしまうんですね・・・🥲

おわりに

CSS gridでサーバーサイドから受け取った値でカード等を表示する際には長い英単語が含まれる可能性がないか等を事前に確認しword-breakの指定をしておかないと、 気付かぬうちにレイアウト崩れが発生してたみたいなことにもなりそうなので気をつけたいですね💦