CSSマソンリーグリッド
このレイアウトは、高さの異なるアイテムを段差なく敷き詰めるマソンリー（れんが積み）グリッドです。実装は JavaScript を使わず CSS の columns プロパティだけで、 columns:3 140px で列数と最小列幅を指定し、各アイテムに break-inside:avoid を付けて要素が列をまた…
解説
このレイアウトは、高さの異なるアイテムを段差なく敷き詰めるマソンリー（れんが積み）グリッドです。実装は JavaScript を使わず CSS の columns プロパティだけで、columns:3 140px で列数と最小列幅を指定し、各アイテムに break-inside:avoid を付けて要素が列をまたいで分断されるのを防ぎます。アイテムは上から下へ列ごとに流し込まれるため、高さがバラバラでも隙間が自然に埋まります。
使う場面
- 写真ギャラリーで縦横比の違う画像を詰めて並べたいとき
- ブログのカード一覧で本文量の差を活かしたいとき
- ピンボード風のコレクションや作品集を見せるとき
列数は columns の数値で、列間と縦の間隔は gap と margin-bottom で調整します。注意点として、CSS の columns は要素を左から右ではなく上から下へ縦に並べるため、表示順が見た目と異なる場合があります。順序が重要なコンテンツには向きません。本物のグリッド型マソンリーが必要なら、対応ブラウザで grid の masonry 値や JavaScript ライブラリの併用も検討します。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
列の数を変えるにはどうしますか
CSS の columns:3 140px の最初の数値を変えれば列数が変わります。140px は1列の最小幅で、画面が狭くなると自動的に列数が減ります。列の間隔は gap、アイテム同士の縦の隙間は margin-bottom で調整します。
並び順が思った通りになりません
CSS の columns はアイテムを横ではなく縦方向に流し込むため、見た目の左右順と記述順が一致しないことがあります。順序が大切なコンテンツには不向きで、その場合はグリッドや専用ライブラリの利用を検討してください。