Masonry グリッドレイアウト
このスニペットは、高さの異なるカードを隙間なく敷き詰める Masonry 風のレイアウトを、JavaScript なしの純粋な CSS だけで実現します。仕組みの中心は CSS の columns プロパティで、 columns:3 220px と書くことで「最小 220px 幅で 3 列」を目安に列が自動生成され…
解説
このスニペットは、高さの異なるカードを隙間なく敷き詰める Masonry 風のレイアウトを、JavaScript なしの純粋な CSS だけで実現します。仕組みの中心は CSS の columns プロパティで、columns:3 220px と書くことで「最小 220px 幅で 3 列」を目安に列が自動生成され、各カードは break-inside:avoid で途中分割を防ぎながら縦に流し込まれます。画像の高さがまちまちでも、列ごとに自然に積み上がるため Pinterest のような見た目になります。
使いどころ
- サムネイル付きのギャラリーや作品集、ブログのカード一覧
- 商品やレシピなど、画像サイズが揃わないコンテンツの陳列
- SNS の投稿フィードのように高さが不揃いなカード群
カスタマイズは columns の数値で列数を、column-gap と各カードの margin-bottom で余白を調整します。注意点として、columns 方式はカードが「左から右」ではなく「上から下」に並ぶため、表示順が視覚的な読み順とずれることがあります。順序が重要な場合は CSS Grid の別実装を検討してください。画像には width と height を指定しておくと、読み込み中のガタつきを抑えられます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
JavaScript ライブラリは必要ですか
いいえ。この実装は CSS の columns プロパティだけで成り立っており、Masonry.js のような外部ライブラリは不要です。HTML と CSS をコピーするだけで動きます。
カードの並び順を左から右にしたい場合は
columns 方式では各列に上から順に流し込まれるため、読み順を左右で揃えたいときは CSS Grid と grid-auto-flow を使った別方式が向いています。順序の正確さが要らないギャラリー用途なら columns で十分です。