CSSだけで行う、子要素の件数に応じたレイアウトの変更

こんにちは、ナカムラです。
今回はCSSだけで行う子要素の件数判定の方法について書きたいと思います。

グリッドを使った一覧などは子要素の件数が変わっても自動的に折り返して行が増えます。
通常はこのままで十分ですが「件数が少ない時は列数を変更したい」場合はどうでしょうか。

javaScriptで判定してクラスを付け替える方法もありますが、今回は子要素の件数の判定も含めてCSSだけで列数を変えてみたいと思います。

DEMO

4件以下の時は2列にします。
4件以下はの時は5件目が存在しませんので、:not()と:has()を組み合わせることで切り替えることができます。

  &.changeColumns:not(:has(:nth-child(5))){
      grid-template-columns: repeat(2,200px);
  }

複数のバナーの掲載箇所など、件数は多くなく、表示件数が頻繁に変わるようなレイアウトに使うと良さそうです。

数を判定するためにjavaScriptを書かなくても大丈夫なんです。
便利になりましたね。
今回はnotとhasの組み合わせができますよ、というご紹介でしたが、他にも条件の書き方はありますので、色々と試して活用したいと思います。

2024/12/13（金）19:00〜「静岡ITもくもく会」を開催します。
私も片隅で黙々と勉強しようと思います。
社外のエンジニアと交流する機会が少ないので、参加してもらえたら嬉しいです。

お申し込みは下記connpassからお願いします。