CSSマルチカラム・マソンリー
このマソンリーは CSS の column-count と column-gap だけで段組みを作る方式です。各カードに break-inside:avoid を指定して途中で分割されないようにし、高さの異なる要素を隙間なく敷き詰めます。
解説
このマソンリーは CSS の column-count と column-gap だけで段組みを作る方式です。各カードに break-inside:avoid を指定して途中で分割されないようにし、高さの異なる要素を隙間なく敷き詰めます。JavaScript を一切使わないため軽量で、要素を追加するだけで自動的に段に振り分けられます。画面幅に応じて段数を切り替えるメディアクエリも備え、640px以下は1段、900pxまでは2段、それ以上は3段になります。
使う場面
- 文章量がまちまちなコラムやお知らせの一覧
- ギャラリーやポートフォリオのカード配置
- タグやレビューなど短いブロックを敷き詰めたいとき
段数を変えたいときは column-count の数値を、カード同士の間隔は column-gap と各カードの margin-bottom をそろえて調整します。なお CSS カラムは要素を縦方向（上から下）に流し込むため、左から右へ順番に並べたい場合には向きません。読み順が重要なコンテンツでは Grid 方式を検討してください。画像を入れる場合は width と height を指定すると段組みのガタつきを防げます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
カードの並び順が思った通りになりません。なぜですか？
CSSカラムは要素を縦方向に流し込む仕様のため、1列目の下まで埋めてから2列目へ移ります。左から右の順序を厳密に保ちたい場合は、CSS GridやFlexboxを使うレイアウトのほうが適しています。
段数をスマホで1列にしたいのですが可能ですか？
可能です。メディアクエリでcolumn-countを1に切り替えれば縦一列になります。このサンプルも640px以下で1列、900pxまでで2列に自動で変わるよう設定済みです。