CSS のみ Masonry レイアウト（column-count）
column-count と break-inside: avoid だけで実現する Pinterest 風 Masonry レイアウト。JS ライブラリ不要。
解説
このレイアウトは column-count でコンテナを縦の段組みに分け、各カードに break-inside: avoid を指定するだけで、高さがバラバラなカードを隙間なく敷き詰める Pinterest 風の Masonry レイアウトです。JavaScript ライブラリは一切使わず、CSS のマルチカラムだけで成立しているのが特徴です。段の間隔は column-gap、カード同士の縦の余白は margin-bottom で調整します。
こんな場面で使えます
- 画像ギャラリーやポートフォリオで、縦横比の違う写真を並べたいとき
- ブログの記事一覧やお知らせカードを、文章量に応じた高さで自然に並べたいとき
- 商品の写真サイズが揃っていない EC のサムネイル一覧
注意点として、カラム方式は左の列から順に上から下へ要素を流し込むため、横方向に「1→2→3」と読ませる並びにはなりません。順番が重要なコンテンツには不向きです。列数はメディアクエリで切り替えられ、このサンプルでは画面幅 600px 以下で 3 列から 2 列に減らしています。スマホでは 1 列にするとさらに読みやすくなります。
使用例・適したシーン
- ブログ一覧
- ポートフォリオ
- ギャラリー
よくある質問
JavaScript なしで本当に動きますか
はい。column-count と break-inside: avoid という CSS のプロパティだけで成立しているため、JavaScript は不要です。読み込みが軽く、ライブラリの保守も発生しません。
列数を変えるにはどうすればよいですか
.masonry の column-count の数値を書き換えるだけです。サンプルではメディアクエリで600px以下を2列にしているので、同じ要領でスマホ向けに1列へ減らす指定も追加できます。