フォト ギャラリー（Masonry 風）
高さの違う画像がパズルのように隙間なく積み上がる、Masonry 風のギャラリーです。複雑な並べ替え用スクリプトは使わず、外側の要素に CSS の column-count:3 を指定し、各タイルに break-inside:avoid を付けて段の途中で割れないようにしているだけです。
解説
高さの違う画像がパズルのように隙間なく積み上がる、Masonry 風のギャラリーです。複雑な並べ替え用スクリプトは使わず、外側の要素に CSS の column-count:3 を指定し、各タイルに break-inside:avoid を付けて段の途中で割れないようにしているだけです。これにより縦に長い写真と短い写真が混在しても、各列が自然に詰まって整った積み木のように並びます。
使う場面
写真家やデザイナーのポートフォリオ、商品ギャラリー、社員紹介の一覧、ブログのアイキャッチ一覧など、サイズの異なる画像をまとめて見せたい場面の定番です。比率を揃えずに放り込めるので、運用が楽なのも利点です。
- 列数：
column-countを増減すると密度が変わります。スマホでは 2 列へ落とす分岐を入れてあります。 - すき間：列間は
column-gap、縦のすき間は各タイルのmargin-bottomで揃えます。 - 注意：CSS の段組みは左の段から順に流れるため、表示順は厳密な左上から右への順序にはなりません。順番が重要な場合は別の手法を検討してください。
使用例・適したシーン
- ブログ一覧
- ポートフォリオ
- ギャラリー
よくある質問
列の数や間隔は変えられますか
変えられます。列数は column-count、列と列のすき間は column-gap で調整します。タイル同士の縦のすき間は各タイルの margin-bottom を同じ値に揃えると整います。
画像が表示される順番は左上から順になりますか
厳密にはなりません。CSS の段組みは左の列を上から下へ埋めてから次の列に移るため、見た目の並びと記述順がずれることがあります。順序が重要なら別実装を検討してください。