CSSマソンリーカードグリッド
この CSS マソンリーカードグリッドは、高さの異なるカードをすき間なく段組みに並べるレイアウトです。JavaScript を使わず、CSS の columns プロパティ（マルチカラム）だけで実現しています。
解説
この CSS マソンリーカードグリッドは、高さの異なるカードをすき間なく段組みに並べるレイアウトです。JavaScript を使わず、CSS の columns プロパティ（マルチカラム）だけで実現しています。親に columns:3 を指定して 3 列に分け、各カードには break-inside:avoid を付けてカードが列の途中で分断されないようにしています。背の高いカードは --tall でパディングを増やし、変化のあるリズムを作っています。
使う場面
- ギャラリーや作品一覧で、高さがまちまちの要素を詰めて見せたいとき
- ブログのカード一覧やタグクラウド的な雑多なコンテンツの陳列
- JavaScript を増やさず、軽量に段組みを作りたいとき
列数は columns の値を変えるだけで調整でき、レスポンシブ対応はメディアクエリで列数を切り替えると簡単です。注意点として、マルチカラムは要素が上から下、左から右ではなく列ごとに流れるため、表示順が視覚的な並びと変わる場合があります。読み順が重要なコンテンツでは、その挙動を踏まえて使い分けてください。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
列の数は変えられますか？
はい。親要素に指定した列数の値を変えるだけで、2 列でも 4 列でも調整できます。メディアクエリで画面幅に応じて列数を切り替えれば、スマホとパソコンで見やすさを保てます。
JavaScript なしで本当に動きますか？
動きます。このレイアウトは CSS のマルチカラム機能だけで段組みを作っており、スクリプトは一切使いません。ただしカードが列ごとに流れる仕様のため、表示の順番が見た目と前後する点には注意してください。