CSSメイソンリーグリッド
これは、高さの違うカードを隙間なく敷き詰めるメイソンリー（石積み）風レイアウトを、JavaScript なしの CSS だけで実現したものです。コンテナに column-count と column-gap を指定して内容を複数の列に流し込み、各カードには break-inside:avoid を付けてカードが列の…
解説
これは、高さの違うカードを隙間なく敷き詰めるメイソンリー（石積み）風レイアウトを、JavaScript なしの CSS だけで実現したものです。コンテナに column-count と column-gap を指定して内容を複数の列に流し込み、各カードには break-inside:avoid を付けてカードが列の境界で分断されないようにしています。画面幅に応じて @media で列数を3→2→1へ減らすため、スマートフォンでも自然に1列に収まります。背の高い・中くらいのカードは min-height で高さの差を出しています。
向いている場面
- 実績やギャラリーなど、サイズの違う要素を詰めて見せたいとき
- ブログ記事カードやSNS投稿風の一覧
- 余白を作らず情報量を多く見せたいポートフォリオ
列数や間隔は column-count と column-gap の値だけで調整できます。手軽な一方で、この方式はカードが上から下→次の列の順に並ぶため、左から右の読み順とは異なる点に注意が必要です。順序が重要なコンテンツより、視覚的なギャラリー向きです。本格的な順序保持が必要なら、対応ブラウザで grid の masonry 値や JS ライブラリの利用も検討します。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
JavaScript なしで動きますか
はい。このレイアウトは CSS の段組み（column-count）だけで成り立っており、スクリプトは使いません。読み込みが軽く、JS が無効な環境でも崩れずに表示されます。
列の数を画面幅で変えられますか
できます。メディアクエリで幅に応じて列数を切り替えており、標準では広い画面で3列、狭くなると2列、さらに狭いと1列になります。区切る幅や列数は数値を変えるだけで調整できます。