一つひとつ知識を積み上げる: CSS Masonry の構築にご協力ください

Patrick Brosset

Alison Maher

公開日: 2025 年 7 月 23 日

Microsoft Edge チームと Google Chrome チームは、Chrome と Edge 140 から CSS masonry の早期デベロッパー テストを開始できるようになったことをお知らせします。

CSS masonry の仕様と構文に関する未解決の問題が残っているため、API の最終的な形を固めるうえで、皆様からのフィードバックが不可欠です。ぜひこの機能をお試しいただき、ご意見をお聞かせください。

Chromium で CSS Masonry を今すぐお試しください

CSS Masonry をテストするには:

1. Chrome または Edge 140 以降（または、対応するバージョンの別の Chromium ベースのブラウザ）を使用します。
2. 新しいタブで about:flags に移動します。
3. 「CSS Masonry Layout」を検索します。
4. フラグを有効にします。
5. ブラウザを再起動します。

この機能を有効にすると、Microsoft Edge のデモで動作を確認できます（デモのソースコードをご覧ください）。また、この機能と利用可能な構文について詳しくは、このまま読み進めてください。

Masonry とは

CSS masonry は、CSS グリッド、Flexbox、マルチカラム レイアウトでは簡単に実現できない、アイテムをレンガのように配置できるレイアウト モードです。

CSS masonry を使用すると、アイテムを列または行の形式で配置し、それらの列または行内にアイテムを折りたたんで配置できます。

メイソンリーは高速道路のようなもので、制約は車線の数とサイズだけです。レーン内では、車両は任意の長さを取ることができ、常に目的地（Masonry レイアウトの開始位置）にできるだけ近づこうとします。

レイアウト アイテムは 1 方向にのみ制約され、近くにある他のアイテムに関係なく、もう 1 方向に自由に配置できます。masonry は、トラックが 1 方向にのみ定義されるという点で、grid とは異なります。

Masonry では、アイテムの視覚的な順序は最終的なデザインほど重要ではありません。Masonry を使用すると、アイテムの種類に関係なく、利用可能なスペースを最大限に活用できます。そのため、視覚的な要素が強く、コンテンツの視覚的な順序よりも最終的な結果が重要となるページに最適です。

Masonry の興味深い点の 1 つは、グリッドと同様に、アイテムが複数のトラックにまたがることを許可していることです。この場合、アイテムは利用可能なスペースをできるだけ埋めるように配置されます。

この自動配置の動作は、ウェブデザイナーが長年実現しようとしてきた非常に興味深い結果につながる可能性があります。たとえば、ニューヨーク市のフォトギャラリーのデモをご覧ください。このデモでは、複数の列に沿って写真をコンパクトに表示しつつ、特定のアイテム（この例ではタイトル）を複数の列にまたがって表示する方法を示しています。

マテリアル デザインのその他の使用例をいくつかご紹介します。

ブログのレイアウト。各投稿のサムネイルと説明が表示されています。

記事が列に表示され、一部の記事は他の記事よりも幅が広く、ヒーロー画像がページの幅全体に及ぶニュースサイト。

さまざまな列のサイズで、特定の写真が複数の列にまたがっている写真のコレクション。

回避策とその制限事項

現在、ウェブでこのデザイン パターンを実装するには、JavaScript ライブラリを使用するか、CSS グリッド、Flexbox、マルチカラムを使用する回避策を使用する必要があります。ただし、これを行うと、次のようなデメリットが生じる可能性があります。

• パフォーマンスの低下: JavaScript ライブラリやカスタムコードに依存して CSS の masonry を模倣すると、パフォーマンスのトレードオフが発生し、ユーザー エクスペリエンスの低下につながる可能性があります。
• コードの複雑さの増大:
  • CSS グリッド、Flexbox、マルチカラム内でアイテムの正しい配置とスペースの配分を保証して、CSS メイソンリー レイアウトを模倣することは困難です。
  • 複数の列や行にまたがるアイテム、アイテムのカスタム順序、ビューポートへの調整などの特定の機能を処理すると、複雑さや制限が生じることもあります。
• メンテナンスの負担が大きい: 複雑なカスタム CSS や JavaScript コードはメンテナンスが難しくなります。

CSS グリッドは、非常に柔軟なレイアウト モードです。ウェブページ全体、コンポーネント、個々のアイテムの配置など、さまざまなスタイルのレイアウトを作成できます。ただし、masonry と同じ特性はありません。

CSS グリッドでは、行と列が厳密に定義され、アイテムはグリッドセル内にのみ存在できます。アイテムを軸に沿って配置しようとしているが、アイテムのサイズがそれぞれのセルに収まらない場合は、アイテム間にギャップを残すか、アイテムを伸ばして空白を埋めるかを選択する必要があります。

Masonry と同様に、Flexbox は 1 つの方向のみを考慮し、アイテムが他の方向で占有するスペースを決定できるようにします。つまり、アイテムをブロック方向に 1 列ずつ配置してもよいのであれば、flexbox を使用してレンガ積みレイアウトのようなレイアウトを取得できます。Flex コンテナには、アイテムを新しい Flex 行に折り返して新しい列を作成するための、定義済みの block-size または height も必要です。

マルチカラムでは、アイテムを列に配置して、レンガ積みに似たレイアウトを作成することもできます。また、マルチカラムでは各列のサイズを個別に設定できません。すべて同じサイズになりますが、Masonry では、アイテムが配置されるトラックを定義する際に柔軟性が高くなります。

ここで覚えておくべき点は、グリッド、フレックスボックス、マルチカラムが masonry よりも劣ったレイアウトであるということではありません。これらは、多くのユースケースがある優れたレイアウト タイプです。要するに、組積造レイアウトが必要な場合は、CSS 組積造を使用すれば実現できるということです。

CSS masonry の現状

CSS ワーキング グループは、CSS グリッド レベル 3 仕様で masonry をドラフトしています。この仕様はまだ作成中であり、一時的に 2 つの異なる構文案が含まれています。1 つ目は display プロパティの新しいキーワードを使用し、2 つ目は CSS グリッド レイアウトに直接統合されています。

display: masonry

この構文では、CSS masonry を独自の display 型として導入しています。アプローチとその動機に関する詳細については、Google Chrome チームのブログ投稿「フィードバックのお願い: CSS masonry の定義方法」と、この投稿の残りのセクションをご覧ください。Chromium の現在のプロトタイプはこの提案に基づいています。

display: grid; grid-template-*: masonry;

この構文では、CSS masonry が CSS グリッドに直接統合されています。行ベースの Masonry レイアウトの場合は grid-template-columns 定義に、列ベースの Masonry レイアウトの場合は grid-template-rows 定義に masonry キーワードを適用することで、Masonry モードがトリガーされます。

この提案とその動機について詳しくは、WebKit の投稿「Help us choose the final syntax for Masonry in CSS」をご覧ください。

この提案の代替案として、2 つのグリッド テンプレート プロパティのいずれかを使用する代わりに CSS メイソンリーをトリガーする item-pack プロパティと collapse キーワードがあります。

Chrome チームと WebKit チームによる投稿の公開以降、CSSWG は全体的な構文に関する議論を継続し、前進してきました。フィードバックは、これらのフォーラムでの今後の開発に役立てられます。

ディスカッションの現在のステータスについて詳しくは、問題 11593 をご覧ください。この問題では、現在の masonry 構文のディスカッション トピックの概要が説明されています。また、問題 11243 では、これまでの構文に関する議論の概要が説明されています。

独自の CSS メイソンリー レイアウトを作成する

CSS の Masonry レイアウトを作成してみましょう。

CSS Masonry の構文はまだ議論中ですが、この機能の実装は、CSS Masonry を今すぐテストするで説明されているように、CSS Masonry レイアウト フラグを有効にすることで、Chromium でテストできます。次の例は、デベロッパー トライアルで利用できる機能を示しています。

Masonry コンテナを作成する

最初の列ベースの Masonry コンテナを作成するには、display:masonry を使用し、grid-template-columns を使用して列のサイズを定義します。masonry-direction のデフォルトは column であるため、このプロパティの設定は省略可能です。

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

行ベースの Masonry コンテナの場合は、代わりに display:masonry を使用し、grid-template-rows を使用して行のサイズを定義してから、masonry-direction:row を設定します。

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

お気づきかもしれませんが、この構文は Google の元の提案とは若干異なります。CSS Masonry に使用されるトリガーに関係なく、CSS ワーキング グループは、CSS Masonry レイアウト内でグリッド テンプレートのサイズ設定と配置のプロパティを再利用することを決定しました。

これにより、レイアウト タイプ間でプロパティをより多く再利用できるようになりますが、混乱を招く可能性もあります。この件について、ぜひご意見をお聞かせください。grid-template-columns や grid-template-rows などのプロパティに対して、template-columns や template-rows などのより一般的なエイリアスを作成することを検討しています。これらのエイリアスは、グリッドと Masonry の両方で使用できます。

デフォルトのトラック サイズを使用する

新しい表示タイプでは、プロパティのデフォルトを再考する機会が生まれます。

グリッドでは、grid-template-columns と grid-template-rows はデフォルトで none になります。現在定義されているように、通常は単一の列または行になります。多くの場合、このデフォルト値では望ましくないレイアウトになります。

Chromium の実装では、新たに提案された none の定義が追加されます。これは、CSS masonry のデフォルトのトラックサイズを置き換えるものです。この新しいデフォルトのトラックサイズは repeat(auto-fill, auto) 値です。この値を使用すると、トラックサイズをまったく定義しなくても、美しい Masonry レイアウトを作成できます。

.masonry {
  display: masonry;
  gap: 10px;
}

画像に示すように、Masonry コンテナは、使用可能なスペースに収まるだけの自動サイズの列を作成します。

CSS グリッドでは、すべてのアイテムはトラックのサイズが設定される前に配置されます。つまり、このトラックの自動サイズ設定の定義はできません。しかし、CSS masonry では、配置とサイズ設定が絡み合って簡素化されるため、この制限は適用されなくなります。この制限が解除されたことで、Masonry レイアウトでより有用なトラックのデフォルト サイズを指定できるようになりました。

masonry の一括指定プロパティを試す

前述のように、Chromium の現在の実装では、grid-template-* プロパティを使用してレイアウト内の Masonry トラックを定義します。ただし、masonry は 1 次元のみであるため、masonry という短縮形プロパティも実装しました。これを使用すると、紛らわしい grid- 接頭辞付きプロパティを使用せずに、masonry の方向とトラック定義の両方を一度に定義できます。

たとえば、次の 2 つのコード スニペットは同等の CSS masonry コンテナを作成します。

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

masonry ショートハンドは、CSS ワーキング グループで現在も議論されています。ぜひお試しいただき、ご意見、ご感想をお聞かせください。

カスタム トラックサイズを使用する

トラック サイズの定義に関しては、レイアウト トラックの数とサイズを微調整できる点で、masonry は grid と同じくらい柔軟です。マトリックス トラックのサイズをすべて同じにする必要はありません。たとえば、次のようにします。

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

この例では、最初の 3rem トラックを 2 つ定義し、その後に 5rem トラックを可変個数定義し、最後に 12rem トラックを 1 つ定義しています。

複数のトラックにまたがる

メイソンリーでは、必要に応じて複数のトラックにまたがるため、アイテムを配置したトラックに制約する必要はありません。一部のアイテムが他のアイテムよりも重要で、より多くのスペースが必要な場合に、この方法は非常に便利です。

次に例を示します。

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

この機能を使用して、複数のトラックにまたがるようにして、特定のアイテムをコンテナの全長にすることもできます。

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

ニュース サイトのデモでは、記事内に定期購読広告を表示するためにこの方法を使用しています。

Masonry アイテムの配置を微調整する

CSS Masonry では、アイテムは実行位置が最も短い列または行に配置されます。

2 列の Masonry コンテナを想像してください。コンテナの 1 列目に高さ 110 ピクセルのアイテムがあり、2 列目に高さ 100 ピクセルのアイテムがある場合、3 つ目のアイテムは 2 列目に配置され、メイソンリーの開始方向から 10 ピクセル近づきます。

実行位置の 10 ピクセルの差が許容範囲で、ソースの順序に合わせて 3 番目のアイテムを 1 列目に配置したい場合は、item-tolerance プロパティを使用します。

新しい item-tolerance プロパティは、アイテムの配置の感度を制御します。

上記の例では、item-tolerance: 10px; をコンテナに適用して、アイテムの配置のばらつきをカスタマイズできます。

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

なお、ドラフトの仕様では、このプロパティを item-slack と呼んでいます。CSS ワーキング グループは最近、代わりに item-tolerance を名前として使用することを決定しました。仕様はまもなく更新されます。

その他の利用可能なプロパティ

CSS Grid と同様に、同じテンプレートのサイズ設定と配置のプロパティを使用して、grid-row、grid-column、grid-area、grid-template-areas、order などの masonry コンテナのグリッド軸でアイテムのサイズを設定して配置できます。CSS グリッドの機能を最大限に活用して、Masonry レイアウトを作成しましょう。

フィードバックのお願い

CSS masonry を活用して、創造性を発揮し、新しい機能を試してみてください。まず、デモとそのソースコードを確認し、Chromium で独自の例を作成することをおすすめします（最初にフラグを有効にすることを忘れないでください）。

皆様からのフィードバックは、API を改善し、ウェブ上のニーズを満たすように設計されていることを確認するうえで重要です。ぜひ masonry をお試しいただき、ご感想をお聞かせください。

API の形状についてご意見やフィードバックがある場合は、Issue 11243 にコメントを残してください。ご自身のブログやソーシャル メディアに投稿する場合は、X または LinkedIn でお知らせください。

CSS masonry は Chromium で実装中です。テストを行う場合は、Google が引き続き積極的に取り組んでいるため、想定どおりに動作しない場合があることにご注意ください。現在の制限事項には、密なパッキング、逆配置、サブグリッドのサポート、フロー外のサポート、ベースラインのサポート、DevTools のサポート、フラグメンテーションのサポート、ギャップ装飾のサポートなどがあります。

この機能をテストしているときにバグが見つかった場合は、新しい Chromium バグを開いてフィードバックをお寄せください。