マソンリーレイアウト
Masonry layout
別名: マソンリーレイアウト、石積みレイアウト、Pinterest型レイアウト、Masonry、Masonry grid
生態（さわってみる）
一言定義
高さの異なるコンテンツを隙間なく詰めて配置する、石積み状のグリッドレイアウト。
分類
使う場面
- 画像や投稿など高さが不揃いなコンテンツを、余白を作らず密に並べたいとき
- Pinterestのような視覚的な発見・回遊を重視するギャラリー表示をしたいとき
避ける場面
- 読む順序や比較のしやすさを優先し、行・列を揃えて整列させたいとき（→通常のグリッド）
- コンテンツの高さがほぼ揃っているとき（通常のグリッドで十分）
近縁種との比較
日本語では直訳の「石積みレイアウト」や、この配置を広めたPinterestにちなむ「Pinterest型レイアウト」という通称も流通するが、本図鑑ではMUIなど多くのライブラリで使われる「マソンリーレイアウト」を見出し名に採用する。カードの通常のグリッド配置とは、行・列を揃えて整列させるか、高さのばらつきを許容して隙間なく詰めるかという点で異なる——読む順序や項目間の比較のしやすさを優先するなら整列グリッド、密度と視覚的な発見性を優先するならマソンリーレイアウトが向く。実装上はCSS Grid Level 3でmasonryが標準化中だが2026年時点でも主要ブラウザの実装が揃っておらず、多くの実装はCSS columnsやJavaScriptでの絶対配置に頼っている。
近縁種
実例リンク
アクセシビリティ
- role
- 視覚順とDOM順が一致するよう気を配る（CSS columnsは縦詰めで視覚順とDOM順がずれやすく、読み上げ順に注意が必要）
- キーボード操作
- 各アイテムがリンク／ボタンであれば、通常どおりTabで移動できる
- 補足
- CSS Grid Level 3のmasonryはまだ勧告候補段階で主要ブラウザの実装が揃っておらず、本デモはCSS columnsベースで実装している