🧱

CSS Masonryがついに登場!? ネイティブでMasonryレイアウトを実現する新時代

に公開
CSS
JavaScript
CSS設計
masonry
tech

CSS Masonryレイアウト：ついにネイティブサポートが実現

Pinterestのような、高低差のあるタイル状のレイアウトに気づいたことはありませんか？

この美しく整然としながらも自然な配置をMasonryレイアウトと呼びます。写真ギャラリー、ブログ記事一覧、ECサイトの商品表示など、コンテンツの高さがバラバラな場面で特に重宝されています。

しかし、これまでCSSでこの効果を実現しようとすると、どうしても「回り道」が必要でした。Masonry.jsのようなJavaScriptライブラリを導入するか、CSS GridやFlexboxで苦肉の策を講じるか。どの方法も決して簡単ではなく、問題が起きた時のデバッグも一苦労でした。

ところが今回、ついに朗報が届きました——CSSがMasonryレイアウトをネイティブサポートするようになったのです！

https://developer.chrome.com/blog/masonry-update

たった一行のdisplay: masonryを追加するだけで、ブラウザが自動的にあの「不揃いな」要素たちを美しく配置してくれます。外部ライブラリは不要、高さの計算も自分でする必要なし。コードはシンプルに、パフォーマンスはより向上します。

本記事では、この革新的な新機能がどのように生まれたのか、どう使うのか、ブラウザサポートの現状はどうなっているのかについて詳しくご紹介していきます。

従来のMasonryレイアウト実装手法

CSS Masonryが登場する以前、開発者たちは様々な方法でMasonryレイアウトを実現してきました。各手法にはそれぞれ特徴と制限があり、完全な解決策は存在しませんでした。

CSS Multi-column（段組みレイアウト）

最もシンプルな方法で、column-countやcolumn-widthを使用します。Tailwind CSSではcolumns-3やcolumns-smなどの便利なユーティリティクラスでこの機能を活用できます。しかし、すべての列が同じ幅でなければならず、コンテンツの順序が縦方向に流れるため、読み順序に問題が生じやすいという欠点があります。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_multicol_layout/Basic_concepts
https://tailwindcss.com/docs/columns

CSS Grid

grid-auto-flow: denseを使用して隙間を埋めようとしますが、行の高さが固定されるため、真のMasonryレイアウトにはなりません。

https://developer.mozilla.org/ja/docs/Web/CSS/grid-auto-flow#dense

JavaScriptライブラリ（Masonry.js等）

最も柔軟な解決策でしたが、パフォーマンスへの影響、メンテナンスの負担、レスポンシブ対応の複雑さなどの課題がありました。特に大量のアイテムを扱う場合、再計算による性能劣化が顕著でした。

https://masonry.desandro.com/

JavaScript + Transform（Pinterestの実装）

Masonryレイアウトの代表格であるPinterestは、JavaScriptとCSS Transformを組み合わせた手法を採用しています。実際のDOM構造を見ると：

<!-- Pinterestの実際のPin要素 -->
<div data-grid-item="true" role="listitem" 
     style="top: 0px; left: 0px; transform: translateX(8px) translateY(313px); 
            width: 239.25px; height: 297px;">
</div>

この方法では、すべての要素をtop: 0px; left: 0pxに設定し、実際の位置はtransform: translateX() translateY()で制御します。JavaScriptが各列の高さを追跡し、最も短い列に新しいアイテムを配置する「最短列アルゴリズム」を使用しています。

transformはリフローを避けてGPU加速を活用できるため、大量のアイテムでも高性能でスムーズなアニメーションが実現できます。
しかし、この手法も複雑なJavaScript計算という課題を持っています。

CSS Masonry：ネイティブ実装の登場

CSS Working Groupは2024年9月にCSS Grid Layout Module Level 3の最初の公開草案を発表し、Masonryレイアウトのネイティブサポートを正式に仕様に含めました。この新機能により、ブラウザが最適化された方法でMasonryレイアウトを計算し、JavaScriptに頼ることなく高性能な実装が可能になります。

現在、2つの異なる構文アプローチが提案されており、ブラウザベンダー間で活発な議論が続いています。WebKit/Safariチームは既存のCSS Gridを拡張する「Grid統合型」を、ChromeチームはMasonry専用の新しい表示タイプを導入する「独立型」を支持しています。

ネイティブCSS Masonryのメリット

従来のJavaScript実装と比較して、ネイティブCSS Masonryには多くの利点があります：

  • 高性能：ブラウザエンジンが直接レイアウトを計算するため、JavaScriptによるDOM操作のパフォーマンスオーバーヘッドを回避
  • 簡単なレスポンシブ対応：ウィンドウサイズ変更時、ブラウザが自動的にリフローを処理し、JavaScriptの実行が不要
  • コード量の削減：外部ライブラリの導入不要、resizeイベントの監視不要、複雑なレイアウトロジックの手書き不要
  • 高速な読み込み：CSSレンダリングはJavaScript実行を待つ必要がなく、ページオープン時に即座に完全なレイアウトを表示

Chromeチームのテストによると、100要素を含むMasonryレイアウトにおいて、ネイティブ実装はJavaScript方式と比較して約40%の高速化を実現しています。

ブラウザサポートと実装状況

Chrome/Chromium系（Edge含む）

2025年7月現在、Chrome 140以降で開発者向けテストが可能です。chrome://flagsでcss-masonry-layoutフラグを有効にすることで、display: masonry構文を試すことができます。現在の実装では、Dense Packing、逆順配置、サブグリッドサポートなどの高度な機能はまだ制限されています。

Safari/WebKit

Safari Technology PreviewおよびSafari 17.x/18.xで、開発メニューの「Feature Flags」から「CSS Masonry Layout」を有効にすることで利用可能です。Safariはgrid-template-rows: masonry構文を実装しており、既存のGrid機能との統合を重視しています。(display: masonryに対応しておりません)

Firefox

Firefoxではabout:configでlayout.css.grid-template-masonry-value.enabledを有効にすることで、Grid統合型の構文をテストできます。

2つの構文提案の詳細

1. Grid統合型構文（WebKit/Safari提案）

既存のCSS Gridを拡張し、masonry（またはcollapse）という新しい値を追加するアプローチです。

/* 列方向のMasonry */
.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-template-rows: masonry;
  gap: 1rem;
}

このアプローチの最大の利点は、既存のGrid機能（サブグリッド、配置、整列など）をそのまま使用できることです。開発者は新しいプロパティを学ぶ必要がなく、既存の知識を活用できます。

2. 独立型構文（Chrome提案）

Masonry専用の新しい表示タイプを導入し、より直感的な構文を提供するアプローチです。

/* 基本的なMasonryレイアウト */
.masonry-container {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
}

/* 詳細な設定例 */
.advanced-masonry {
  display: masonry;
  masonry-direction: column; /* デフォルト値 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  item-tolerance: 10px; /* 配置の柔軟性 */
  gap: 1rem;
}

Chrome実装では、repeat(auto-fill, auto)がデフォルト値として設定され、自動サイズの列を作成します。これにより、多くの一般的なユースケースで記述量を削減できます。

コード例

基本的な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レイアウト

行ベースの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;
}


同じサイズの行のデモはこちら

デフォルトトラックサイズの活用

従来のCSS Gridでは、grid-template-columnsとgrid-template-rowsのデフォルト値はnoneで、これは通常単列または単行を生成します。Masonryレイアウトにとって、このデフォルト値は理想的ではありません。

Chromiumの実装では、noneに対する新しい定義を追加し、CSS Masonryにおけるデフォルトトラックサイズをrepeat(auto-fill, auto)に設定しています。これにより、トラックサイズを定義せずに美しいMasonryレイアウトを作成できます：

.masonry {
  display: masonry;
  gap: 10px;
  /* デフォルトで利用可能なスペースに自動サイズの列を作成 */
}


デフォルトのトラックサイズのデモはこちら

masonryショートハンドプロパティ

より直感的な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は柔軟なトラックサイズ定義をサポートしています：

.masonry {
  display: masonry;
  masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
  /* 2つの3rem列 + 一定数の5rem列 + 1つの12rem列 */
}


カスタムトラックサイズのデモはこちら

複数トラックのspan

重要なアイテムをより目立たせるため、複数トラックにまたがる配置が可能です：

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

.important-item {
  grid-column: span 2; /* 2列分の幅 */
}

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


複数のトラックにまたがる span のデモはこちら

実装方法の比較表

実装方法 利点 欠点 適用場面
CSS Multi-column • シンプルな実装
• 広いブラウザサポート		 • 列幅が固定
• 読み順序の問題
• 高さ制御が困難		 テキスト中心のコンテンツ
CSS Grid（従来） • 柔軟な配置
• レスポンシブ対応
• サブグリッド対応		 • 真のMasonryではない
• 行の高さが固定
• 手動調整が必要		 グリッド状のレイアウト
Masonry.js • 完全な制御
• 豊富なオプション
• 成熟したライブラリ		 • パフォーマンス負荷
• JavaScript依存
• メンテナンスコスト		 レガシーブラウザ対応
Pinterest式Transform • 高性能（GPU加速）
• スムーズなアニメーション
• 工業級の安定性		 • 複雑なJavaScript
• 開発・保守コスト
• ブラウザ対応負担		 大規模サービス
CSS Masonry（Grid統合） • 既存Grid機能の活用
• 学習曲線が緩やか
• 将来の拡張性		 • 冗長な構文
• コンセプトの混在		 Grid経験者向け
CSS Masonry（独立型） • 直感的な構文
• 優れたデフォルト値
• 明確な分離		 • 新しいプロパティ
• Grid機能の再実装		 Masonry専用の用途

フィーチャー検出とフォールバック

/* CSSによる検出 */
@supports (display: masonry) {
  .container {
    display: masonry;
    masonry: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@supports (grid-template-rows: masonry) {
  .container {
    display: grid;
    grid-template-rows: masonry;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* フォールバック */
.container {
  /* 基本的なグリッドレイアウト */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
}

// JavaScriptによる検出
if (CSS.supports('display', 'masonry') || 
    CSS.supports('grid-template-rows', 'masonry')) {
  // ネイティブMasonryを使用
  container.classList.add('native-masonry');
} else {
  // Masonry.jsなどのフォールバック
  new Masonry(container, { /* オプション */ });
}

将来のロードマップと標準化

現在の進捗状況

CSS Working Groupは、2025年3月に更新された草案で、混合トラックサイジングの完全サポートと、grid-*プロパティの再利用について合意に達しました。現在も構文の最終決定（Grid統合型 vs 独立型）について議論が続いています。

今後の予定

  • 2025年後半：ブラウザ実装の改善と開発者フィードバックの収集
  • 2026年前半：仕様の安定化とクロスブラウザサポートの拡大
  • 実装優先度：開発者からの高い需要により、優先的に開発が進められています

オープンな課題

  1. 最終的な構文：どちらのアプローチが採用されるか
  2. 値の命名："masonry" vs "collapse" vs "pack"
  3. デフォルト値：様々なユースケースに最適なデフォルト設定

アクセシビリティへの配慮

Masonryレイアウトでは、視覚的な順序とDOM順序が異なる可能性があるため、スクリーンリーダーユーザーへの配慮が重要です。reading-flowプロパティやitem-toleranceを活用し、可能な限りソース順序を維持することが推奨されています。

.accessible-masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(250px, 1fr));
  item-tolerance: 30px; /* ソース順序を優先 */
  reading-flow: normal; /* 将来的なプロパティ */
}

まとめ：CSS Masonryがもたらす変革

CSS Masonryは、長年Web開発者が求めてきたネイティブなMasonryレイアウトを実現する画期的な機能です。JavaScriptライブラリに頼ることなく、高性能で保守性の高いレイアウトが可能になります。現在は2つの構文提案が競合していますが、どちらが採用されても、Web開発における表現力は大きく向上するでしょう。

開発者の皆様には、両方の構文を実際にテストし、実際のプロジェクトでの使用感をフィードバックすることをお勧めします。今後1〜2年で仕様が安定化し、すべての主要ブラウザでサポートされることが期待されています。CSS Masonryは、Webデザインの新たな可能性を開く重要な一歩となるでしょう。

Discussion