CSS Gridの列幅と、長いタイトルの折り返し

幅の狭い画面では一列、広い画面では二列にするCSSの例です。列の最小幅を0にして、長い文字列の折り返しも指定します。

.post-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.post-list > article {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
  .post-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

minmax(0, 1fr)は、列の幅を0から余った領域の一部分までとする指定です。上の二列の例では、同じ比率で幅を分けます。grid-template-columnsの構文を参照。

長い文字列で確認する

長いURLや空白のない英数字は、短い日本語の見出しとは折り返し方が異なります。overflow-wrap: anywhereは、文字列が収まらない場合に折り返しを許可します。MDNのoverflow-wrapに各値の違いがあります。

確認用に、長い英単語、日本語と英数字の混在、タグが多い記事を並べます。画面幅を狭めたときにページ全体へ横スクロールが出ないか、文字を拡大しても読めるかを確認します。