CSS columnsマソンリーレイアウト
これは CSS の column-count を使った、いわゆるマソンリー（れんが積み）レイアウトです。高さの違うカードを段組みに流し込むと、空きスペースを詰めながら自然に並ぶため、写真ギャラリーやカードの一覧が整って見えます。
解説
これは CSS の column-count を使った、いわゆるマソンリー（れんが積み）レイアウトです。高さの違うカードを段組みに流し込むと、空きスペースを詰めながら自然に並ぶため、写真ギャラリーやカードの一覧が整って見えます。JavaScript を一切使わず CSS だけで成立しているのが特徴で、軽くて崩れにくい構成です。
仕組みと崩れ防止
親要素に column-count:3 と column-gap を指定して3列に分け、各カードには break-inside:avoid を付けています。これがないとカードが列の境目で途中分割されてしまうため、見た目を保つ要のプロパティです。画面幅が 540px 以下になると column-count:2 に切り替わり、スマートフォンでも窮屈になりません。
- 列数を増やしたいときは
column-countの数字を変えるだけで対応できます - カードの間隔は
column-gapと各カードのmargin-bottomの両方で調整します - 並び順は上から下でなく左の列から順に流れる点に注意し、順序が重要な内容には向きません
使用例・適したシーン
- ブログ一覧
- ポートフォリオ
- ギャラリー
よくある質問
列の数を変えるにはどうしますか
親要素の column-count の値を変えます。3 を 4 にすれば4列になります。スマートフォン向けの列数は、メディアクエリの中にある column-count を別に指定しているので、そちらも合わせて調整してください。
カードが列の途中で切れてしまいます
各カードに break-inside:avoid が付いているか確認してください。このプロパティがないと、カードが列の境界でふたつに分割されて表示が崩れます。付けることで1枚のカードがまとまって配置されます。