Masonry
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSS グリッドレイアウト仕様書のレベル 3 では、 masonry の値が grid-template-columns と grid-template-rows に含まれています。このガイドでは、メイソンリー（組積）レイアウトとは何か、どのように使用するかについて詳しく説明します。
メイソンリーレイアウトとは、一方の軸（多くの場合は列）が一般的な厳格なグリッドレイアウトを使用し、もう一方の軸がメイソンリーレイアウトを使用するレイアウト方法です。メイソンリーレイアウトでは、短いアイテムの後に隙間ができるような厳密なグリッドではなく、次の行のアイテムが隙間を完全に埋めるように立ち上がっていきます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | 77 | Preview | | | |
| CSS プロパティ | ||||||
masonry 実験的 | | | 77 | Preview | | |
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
- ブラウザの実験的フラグを有効にする必要があります
基本構文
CSS
.gallery {
display: grid-lanes;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}ライブデモ
実務での使いどころ
-
画像ギャラリーのタイル配置
異なるサイズの画像をMasonryレイアウトで隙間なく配置し、Pinterest風のギャラリーを実現します。
注意点
- 2026年3月時点でどのブラウザでも標準サポートされていません。実装にはJavaScriptライブラリの使用を検討してください。
アクセシビリティ
- Masonryレイアウトでは視覚的な順序とDOM順序が異なる場合があるため、スクリーンリーダーでの読み上げ順序を確認してください。