マソンリーグリッドレイアウト
マソンリーグリッドは、高さの違うカードや画像を隙間なく積み上げる、ピンタレストのようなレイアウトです。この実装は JavaScript を使わず、CSS の columns プロパティだけで段組みを作ります。
解説
マソンリーグリッドは、高さの違うカードや画像を隙間なく積み上げる、ピンタレストのようなレイアウトです。この実装は JavaScript を使わず、CSS の columns プロパティだけで段組みを作ります。各アイテムに break-inside:avoid を付けることで途中で列が分断されるのを防ぎ、画面幅 480px を境に columns を 2 段から 3 段へ切り替えています。画像は object-fit:cover で枠に合わせて切り取られ、角丸と overflow:hidden で整った見た目になります。
向いている使いどころ
- 作品集・ギャラリー・写真の一覧表示
- 高さがまちまちなカードを詰めて見せたいブログのサムネイル一覧
- 商品画像をリズムよく並べたいショップのカタログ
列数は columns の数値を、アイテム間の余白は gap と margin-bottom を変えるだけで調整できます。注意点として、columns 方式はアイテムが上から下へ縦に流れてから次の列へ移るため、表示順序が左から右の順番にはなりません。読む順序が重要なコンテンツより、眺める用途に向いた手法です。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
列の数を増やしたり減らしたりできますか
CSS の columns に指定した数値を変えれば列数を調整できます。メディアクエリの中の値を変えると、画面幅ごとの列数も変えられます。
JavaScript のライブラリは必要ですか
この実装は CSS の columns プロパティだけで成り立っているため、外部ライブラリは不要です。ただし表示が左から右の順番に並ばない点はこの方式の特性として理解しておいてください。