CSS Masonry 風グリッド
Masonry 風グリッドは、高さの異なるカードを隙間なく敷き詰めるレンガ積みのレイアウトです。この実装は CSS の column-count:3 による段組みを使っており、JavaScript は不要です。
解説
Masonry 風グリッドは、高さの異なるカードを隙間なく敷き詰めるレンガ積みのレイアウトです。この実装は CSS の column-count:3 による段組みを使っており、JavaScript は不要です。各カードに break-inside:avoid を付けて段の途中で割れないようにし、column-gap で横の間隔、margin-bottom で縦の間隔を作っています。高さがバラバラでも上から順に詰められるため、ギャラリーらしい不規則な見た目になります。
得意な場面と弱点
- 写真・作品サムネイルの一覧
- 長さの違うコメントやカードの陳列
- Pinterest 風のビジュアル中心ページ
列数は column-count の数字で増減できます。ただし段組みは上から下、左から右へ縦に流れて配置されるため、読み順を厳密に保ちたいコンテンツには向きません。順番が重要なら、CSS Grid の本物の masonry 機能やライブラリの利用を検討してください。色や角丸はカードの background や border-radius で調整できます。
使用例・適したシーン
- ブログ一覧
- ポートフォリオ
- ギャラリー
よくある質問
カードの列数を変えたいです
.mc の column-count の数字を変えるだけです。3を2にすれば2列、4にすれば4列になります。画面幅に応じてメディアクエリで切り替えるのもおすすめです。
並ぶ順番は左から右ですか
いいえ。段組みは縦方向に流れるため、上から下へ1列目を埋めてから次の列に移ります。表示順を厳密にしたい場合はこの方式は不向きです。