【CSS】Masonry Layoutをざっくり理解する

Posted at 2025-12-20

Masonry Layout （メイソンリーレイアウト）とは？

要素をレンガのように配置できるレイアウト

Masonry Layoutの仕様ポイント

① レーン（列または行）の数とサイズだけが決まっている
縦にコンテンツが並ぶ場合、「縦に3つ並べる」「幅は200pxずつ」など列のルールだけを決める

/* Chrome 140以降向け（※現在ブラウザによって書き方が異なる）*/
.container {
  display: masonry;
   /* 列のルール：最小200pxで、入る分だけ列を作る */
  masonry-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

② レーンの中で、要素は任意の長さを取れる

③ 常にレイアウトの開始位置に近づこうとする
レーンの中で、「今、一番空いている隙間はどこか？」と探して、自動的に要素が配置される

④ 要素は複数のレーンにまたがることができる

GridとMasonryの違い

縦方向に要素が並ぶ場合、行の高さが固定されるかどうかが違います。

左のGrid例
- 要素の高さが大きい方に合わせて高さが決まっている
- そのため、要素の高さが低い場合、縦方向に大きな隙間が生まれる場合がある
右のMasonry例
- 要素が任意の高さを取れるため、隙間が大きく開かない
- 自動で要素が隙間を詰めてくれる

Grid	Masonry

Masonry Layout を使う場面

視覚的な要素が強く、コンテンツの視覚的な順序よりも最終的な結果が重要となるページに最適です。

Chrome for developers では上記の記載がありました。

もうちょっと具体的にシーンを想像するために、Masonry Layout が特徴的なサイトをいくつかみてみます

Pinterest

Unsplash - ストックフォトサイト

Tumblr - ブログとSNSが融合したサービス

佐賀市のあたりまえ観光

上記の例を踏まえると、以下の場合に Masonry Layout は適していそうです

様々なコンテンツ（特に画像）を適したサイズで柔軟に見せたいとき
画面内の密度を上げて、賑やかさを出したいとき

ブラウザの対応状況

現状、標準リリースされているブラウザはなく、試験的に動かせる状態です
また、「Gridの一部」なのか「独立したdisplay」とするかは、ブラウザによって異なります

Chrome,Edge

display: masonry という新しいプロパティ名で試験実装
2025年半ばには、Chrome,Edge 140以降のバージョンで試験的な実装が強化され、開発者がフィードバックを送りやすい環境が整ってきている
- https://developer.chrome.com/blog/masonry-update?hl=ja
display: masonryを試す方法は後述

Firefox

display: grid のオプションとして実装
grid-template-rows: masonryを実験的にサポートしていた
アドレスバーに about:config と入力して、layout.css.grid-template-masonry-value.enabledを検索して、trueにする