CSSで左揃えで横並びにした要素をセンタリングする ⚽️

いままで、float だったり、 flex だったり、mediaクエリ で画面幅ごとに定義したり、ときにJavaScriptであれこれしたりしながら実装してきた、左揃えで横並びにした要素のセンタリングですが、グリッドレイアウトを使えばものすごくシンプルに実現できることを実感しました。

developer.mozilla.org

グリッドレイアウトは知識としては知っていたのですが、かつて、フレックスボックスが出たての頃に意気揚々と実践投入したらIEやAndroidでバグりまくった苦い経験があったため、慎重に構えすぎてこれまで実戦では使ってきませんでした。

しかし、もう2024年。そろそろグリッドレイアウトを使っても問題なかろうと判断し、今後は積極的に使っていこうと思います。

左揃えで横並びにした要素をセンタリング

HTML

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

SCSS

div {
  padding: 8px;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  justify-content: center;
  gap: 8px;
  
  li {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: rgba(0, 0, 0, .4);
  }
}

DEMO

https://jsfiddle.net/kimizuka/gz69d3wm/7/

画面幅を変えながらご覧ください。
ものすごくシンプルです。グリッドレイアウトを使わずにこれを実現するのがとても大変でした。

左揃えで横並びにした要素を画面幅に応じて幅を可変させる

HTML

SCSS

div {
  padding: 8px;
}

ul {
  display: grid;
  // grid-template-columns: repeat(auto-fit, 200px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
  gap: 8px;
  
  li {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: rgba(0, 0, 0, .4);
  }
}

DEMO

https://jsfiddle.net/kimizuka/kcpLjotq/8/

こちらも、画面幅を変えながらご覧ください。

grid-template-columns: repeat(auto-fit, 200px);

の部分を、

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

に変更すると、画面幅に合わせて要素のサイズを可変させてくれるようになります。
要素の幅が200pxを確保できそうであれば一列に並べる要素の数を増やします。
これも、グリッドレイアウトを使わずに実装するのが大変でした。非常に便利な時代になりましたね。