CSS Grid Lanesはmasonryを置き換えるか──Safari先行、Chrome追随の現在地

高さの異なるカードを隙間なく並べるmasonryレイアウトは、長らくJavaScriptライブラリの領域でした。CSS Gridのmasonry実装は議論が続き、一時は`grid-template-rows: masonry`という案もありましたが、最終的に`display: grid-lanes`という名前で仕様が固まりました。

Safari 26.4が最初にデフォルト搭載し、Chrome/Edge/Firefoxはフラグ付きで実装を進めています。Chromeは2026年中の出荷を計画していますが、執筆時点ではまだデフォルトではありません。この記事では、Grid Lanesで何が変わるのか、最小実装、フォールバック、導入判断を整理します。

30秒でわかる結論

• CSS masonryは`display: grid-lanes`として仕様化された。
• Safari 26.4が最初にデフォルト搭載。Chrome/Edge/Firefoxはフラグ付き。
• 高さの異なるカードを、JSなしで詰めて並べられる。
• Chromeは2026年中のShipを計画中。現時点ではSafari限定の演出に向く。
• `@supports (display: grid-lanes)`でフォールバックし、基幹レイアウトにはまだ使わない。

何が起きたのか：masonryからgrid-lanesへ

CSS Gridのmasonryは、2010年代から要望が強かった機能です。ChromeとEdgeは一度`display: masonry`として実装しましたが、CSS Working Groupでの議論を経て、`display: grid-lanes`に名前と構文が変わりました。Safari 26.4はこの最終形を最初に搭載しました。

Grid Lanesは、片方の軸を厳密なグリッド、もう片方の軸を「レーン」として扱うレイアウトです。列の幅はグリッドで揃えつつ、各アイテムは高さに応じて次の空きスペースに配置されます。従来のGridのように行の高さを揃える必要がありません。

何が変わるのか：JS masonryからの置き換え

これまでのmasonryは、Masonry.jsなどのライブラリで要素の絶対位置を計算するか、CSS Columnsで擬似的に表現するのが一般的でした。JS方式は画像の読み込み後に再計算が必要で、CLS（レイアウトシフト）やリサイズ時のガタつきが課題でした。CSS Columnsは縦方向の並び順が直感と合わないことがあります。

Grid Lanesはブラウザのレイアウトエンジンが配置を計算するため、JSの再計算が不要になります。画像の読み込みやレスポンシブ変更にも、ブラウザが自然に追随します。

最小実装：`display: grid-lanes`

基本は、通常のGridと同じように列を定義し、`display`だけを`grid-lanes`にします。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

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

アイテム側は通常のカードで構いません。高さが不同でも、ブラウザが各レーンの空きスペースに詰めてくれます。`gap`、`grid-column`、`grid-row`などの基本的なGridプロパティも使えます。

<div class="gallery">
  <article class="card">...</article>
  <article class="card">...</article>
  <article class="card">...</article>
</div>

画像ギャラリーのように高さがバラバラな要素を、行の高さを揃えずに並べられます。カードの順序はDOM順を基本にしつつ、レーンごとに詰められます。

masonryとgrid-lanesは何が違う？→ 名前と構文が変わっただけで、目指しているレイアウトは同じです。以前の`display: masonry`や`grid-template-rows: masonry`は古い構文なので、新しい`display: grid-lanes`を使ってください。

どこで効くか：ギャラリーとカードフィード

• 写真ギャラリー、ポートフォリオ、作品一覧。
• 高さが異なるカードが並ぶフィード型UI。
• ECの商品一覧で、画像比率が異なる商品を詰めて見せる。
• ブログの記事一覧で、サムネイルの有無が混在する場合。
• ダッシュボードのウィジェット配置。

特に効果が大きいのは、画像の高さが読み込み後に変わるギャラリーです。JSで再計算する必要がなくなり、CLSを抑えやすくなります。

注意点：対応状況と読み順

• Safari以外はデフォルト未対応。`@supports`フォールバックが必須。
• ChromeのShip予定は2026年中だが、執筆時点ではフラグ付き。
• レーン配置はDOM順と視覚順がずれる場合がある。キーボード操作と読み上げ順を確認する。
• フォールバックでは通常のGrid/Columnsになり、見た目が変わる。
• アイテムの高さが動的に変わると、再配置のコストがかかる場合がある。

フォールバックでは`grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))`の通常Gridにしておくと、どのブラウザでも破綻しにくいです。Safariだけmasonry、他は整列Gridという差は許容します。

実務での使い方：Safari限定の演出から

現時点では、Safariで見た目がリッチになる「プログレッシブエンハンスメント」として使うのが現実的です。たとえば、ポートフォリオのギャラリーをSafariではmasonry、Chrome/Firefoxでは通常Gridにします。ユーザーの主要導線ではなく、装飾的な一覧に向きます。

Chromeの安定版が出荷され、Firefoxの対応が進めば、基幹の商品一覧や記事一覧にも広げられます。それまでは、`@supports`で囲んだ小さな実験として扱います。

読み順が重要な一覧（検索結果、商品一覧、記事フィード）では、視覚順とDOM順のずれをテストします。masonryは見た目が優先されがちですが、スクリーンリーダーとキーボードではDOM順に読まれるためです。

対応状況と使う判断

自分なら使うか：まだ様子見。 Safari限定の演出や、`@supports`で通常Gridにフォールバックできるギャラリーなら試す価値はあります。基幹レイアウトには、Chromeの安定版出荷とFirefoxの対応を確認してから導入します。

まとめ

• CSS masonryは`display: grid-lanes`として仕様化された。
• Safari 26.4が最初にデフォルト搭載。Chromeは2026年中のShipを計画。
• 高さの異なるカードをJSなしで詰められ、CLSを抑えやすい。
• 現時点ではSafari限定のプログレッシブエンハンスメントに向く。
• `@supports`フォールバックと読み順の確認を前提にする。

参考リンク

• MDN: Grid lanes layout
• WebKit Features for Safari 26.4
• Chrome Platform Status: CSS Grid-Lanes