【CSS】gridを使って要素を縦並びで複数カラムにする簡単な方法

要素を複数カラムで縦方向に並べるのって、結構悩みどころです。。
今回は、gridを使って縦並びにする方法をご紹介します。

gridで縦並びにするカギは、grid-auto-flow

gridを使った縦並びは、grid-auto-flowを使います。
grid-auto-flowはデフォルトでrow（横方向）に設定されていますが、これをcolumn（縦方向）に設定します。

今回は、こんな飲み物のリストを縦に並べてみました。

See the Pen gridを使って要素を縦並びで複数カラムにする方法 by nico (@etsuko-kobanawa) on CodePen.

CSSを見ると、2行目で縦並びの設定grid-auto-flow: column;に加え、
3行目で「縦方向に4つずつ繰り返す」意味のgrid-template-rows: repeat(4, auto);を記述しています。
これにより縦に並ぶ子要素の数が4つまでになるので、5つ目以降は次のカラムに表示される、という仕組みです。

まとめ

という訳で、gridを使って要素を縦並びで複数カラムにする簡単な方法をご紹介しました。

grid以外にもやり方はあるので、ケースバイケースで使い分けてみてください。
※grid以外の複数カラム縦並びの方法は、下記の記事で紹介しています。
liタグを複数列で縦並びさせたいとき、超絶簡単な方法があった！｜nico MEMO