石積みレイアウト
Masonry layout高さの異なるコンテンツを隙間なく詰めて配置する、石積み状のグリッドレイアウト。
○ 使う場面
- 画像や投稿など高さが不揃いなコンテンツを、余白を作らず密に並べたいとき
- Pinterestのような視覚的な発見・回遊を重視するギャラリー表示をしたいとき
× 避ける場面
- 読む順序や比較のしやすさを優先し、行・列を揃えて整列させたいとき（→通常のグリッド）
- コンテンツの高さがほぼ揃っているとき（通常のグリッドで十分）
別名
マソンリーレイアウト、Pinterest型レイアウト
近縁種との比較
本図鑑では直訳の「石積みレイアウト」を見出し名に採用し、この配置を広めたPinterestにちなむ「Pinterest型レイアウト」や、MUIなど多くのライブラリで使われる「マソンリーレイアウト」も別名として併記する。実装上はCSS Grid Level 3でmasonryが標準化中だが2026年時点でも主要ブラウザの実装が揃っておらず、多くの実装はCSS columnsやJavaScriptでの絶対配置に頼っている。
| 近縁種 | 違い・使い分け |
|---|---|
| カード | カードの通常のグリッド配置とは、行・列を揃えて整列させるか高さのばらつきを許容して隙間なく詰めるかという点で異なり、読む順序や比較のしやすさを優先するなら整列グリッド、密度と視覚的な発見性を優先するなら石積みレイアウトが向く。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション