CSS Grid Lanes:新しいネイティブなマソンリーレイアウト

Pinterest スタイルのレイアウトを構築した経験があるでしょう。JavaScript ライブラリ、CSS の複数カラムを使ったハック、または計算された行スパンを用いた複雑な Grid の回避策を使用してきたはずです。それぞれのアプローチは機能しますが、どれもネイティブな実装とは言えません。

CSS Grid Level 3 では、Grid 内でネイティブなマソンリースタイルの動作を実現する方法が検討されています。現在の提案の一つとして、この機能の構文として display: grid-lanes が導入される可能性がありますが、本番コードをリファクタリングする前に、2026年初頭の時点で実際にどのような状況にあるのかを理解する必要があります。

本記事では、CSS Grid Lanes の背後にある核となる概念、従来の Grid との違い、現在のブラウザサポートの実情、そして採用前に考慮すべき点について解説します。

CSS Grid Lanes が実際に行うこと

従来の CSS Grid は、2つの軸で同時に動作します。行と列の両方を定義し、アイテムは明示的なセルを占有します。これにより予測可能な矩形レイアウトが作成されますが、アイテムの高さが異なる場合には隙間が生じます。

CSS Grid Level 3 のドラフトでは、「grid lanes」と呼ばれることもあるマソンリースタイルの動作が導入されています。一方の軸(通常は列)でトラックを定義し、もう一方の軸ではマソンリースタイルのアルゴリズムを使用してアイテムを密に配置します。アイテムは最も利用可能なスペースがあるレーンに流れ込み、自動的に隙間を埋めます。

現在議論されているドラフト構文は次のようになります:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

ただし、構文と動作はまだ進化中です。初期の実験では、grid-template-rows や grid-template-columns 内で masonry のような値が使用され、一部のエンジンはそれらのアプローチのプロトタイプバージョンを実装しました。CSS ワーキンググループは、マソンリーを Grid Level 3 に統合する方法を引き続き改良しています。最新のドラフトについては、CSS Grid Layout Module Level 3 を参照してください。

Grid Lanes と標準的な Grid の違い

display: grid では、アイテムは行と列の両方のトラックを尊重します。短いアイテムは、次の行が始まるまで下に空きスペースを残します。

マソンリースタイルの Grid 動作では、一方の軸のみが定義されたトラックを持ちます。もう一方の軸のアイテムは、厳密な行の境界ではなく、利用可能なスペースに基づいて積み重ねられます。これにより、マソンリーレイアウトの特徴的な千鳥配置の外観が作成されます。

列トラックの定義や明示的な配置など、ほとんどの馴染みのある Grid 機能は概念的には利用可能ですが、機能が実験的な段階では実装が異なる場合があります。スパンやエッジケースの配置などの動作は、エンジン間でまだ完全に相互運用可能ではありません。

ウォーターフォールレイアウトとブリックレイアウト

grid-template-columns で列を定義すると、アイテムは垂直方向に流れます—これが古典的なウォーターフォールレイアウトです。grid-template-rows で行を定義すると(実験的な実装では)、アイテムは水平方向にブリックスタイルのパターンで流れます。

フロー動作や順序制御などの詳細は、仕様でまだ議論中であり、ブラウザのプレビュー間で異なる場合があります。ターゲットブラウザでサポートを確認しない限り、非標準またはドラフトのみのプロパティに依存しないでください。

ブラウザサポート:現実的な状況

ここが本番環境での計画が複雑になる部分です。

2026年初頭の時点で、CSS Grid のネイティブなマソンリー動作は、すべての主要ブラウザで実験的な段階にあります:

• Safari Technology Preview は、より完全なプロトタイプ実装の一つを持っています。
• Chromium ベースのブラウザは、以前の masonry トラック値を含む、フラグの背後でマソンリー関連の構文を実験してきました。
• Firefox は、設定フラグの背後でマソンリーの実験を実装しています。

執筆時点では、主要な安定版ブラウザチャネルで、完全に相互運用可能でフラグなしのサポートを提供しているものはありません。互換性の状況は、Can I use とブラウザのリリースノートで追跡できます。

CSS ワーキンググループは、Grid Level 3 内の統合の詳細を引き続き改良しています。

実用的な結論: フォールバックなしでマソンリースタイルの Grid 構文を本番環境にリリースしないでください。

プログレッシブエンハンスメント戦略

機能検出により、サポートされている場合は実験しながら、適切にフォールバックできます:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

サポートしていないブラウザは、標準的な Grid レイアウトをレンダリングします。アイテムは密に配置されるのではなく、行に整列します—多くのユースケースで許容可能なベースラインです。

安定化前に構文が変更される可能性があるため、これは長期的な本番環境への依存ではなく、プログレッシブエンハンスメントとして扱ってください。

アクセシビリティとソース順序の懸念

マソンリーレイアウトは、DOM と視覚的な順序の問題を引き起こします。アイテムは、ソース順序ではなく、パッキングアルゴリズムによって決定された位置に表示されます。コンテンツをタブで移動するユーザーは、レイアウト全体で予測不可能にジャンプする可能性があります。

これは Grid Lanes に固有のものではなく、マソンリースタイルのレイアウトに固有のものです。特に読み取り順序が重要なコンテンツでは、キーボードナビゲーションを徹底的にテストする必要があります。

スクリーンリーダーは、視覚的な配置に関係なく DOM 順序に従います。HTML 構造が線形に読まれたときに意味をなすことを確認してください。

結論

実験、プロトタイプ、プログレッシブエンハンスメントレイヤーについては、マソンリースタイルの Grid 動作は今すぐ探求する価値があります。Grid Level 3 内で方向性が明確になってきており、今日の実践的な経験は、ブラウザサポートが成熟したときに報われます。

一貫したクロスブラウザ動作を必要とする本番機能については、待ってください。コミットする前に、仕様の議論とブラウザの実装ノートを監視してください。

ネイティブな CSS マソンリーは長年の要望でした。ついに形になりつつありますが、まだ完全に標準化または相互運用可能ではありません。広く採用する前に、ブラウザサポートが要件に合致することを確認してください。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..