CSS Grid Lanes: Safariのネイティブmasonry

ピンタレスト風に要素を互い違いに並べ、あらゆるサイズのアイテムが空いたスペースへ流れ込むmasonryレイアウトは、JavaScriptライブラリやfloat、そして「ほぼ動くが肝心なところで破綻する」Flexboxのハックに支えられ、10年以上にわたって本番環境で使われてきました。¹ WWDC 2026で、AppleのSafariチームはこれをネイティブに実現するレイアウトモード、CSS Grid Lanesをウェブに提供しました。masonryというパターン自体は古いものです。しかし、それをわずか3行で生み出す第一級のCSS displayタイプ、そしてmasonryの慢性的なタブ順序とアクセシビリティの問題を解決するflow-toleranceダイヤルは、新しいものです。Grid LanesはSafari 26.4で今日から利用でき、他のブラウザではフラグの背後で使えます。¹

TL;DR

• Grid Lanesは、GridとFlexboxの中間に位置する新しいCSSレイアウトモードです。一方の軸を構造化し、もう一方は自由なままにすることで、コンテンツを複数のレーンに分散させ、各アイテム本来の比率を保ったまま、きっちりと詰まった互い違いのレイアウトを生み出します。¹
• 全体はわずか3行です。display: grid-lanes、frトラックを使ったgrid-template-columns、そしてgap。grid-template-columnsをgrid-template-rowsに入れ替えれば、滝のような縦の流れをレンガ壁のような横の流れに変えられます。選べる方向は一つだけで、両方ではありません。¹
• トラックのサイズ指定はGridから引き継がれます。不均等なfr比率、レスポンシブな列数のためのauto-fillとminmax()、そして狭い列と広い列の繰り返しパターンが使えます。¹
• アイテムには、すでにおなじみのGridプロパティを使います。幅を広げるgrid-column: span 2、明示的な列の配置、そしてカードの中身を親レイアウトに折り込むgrid-template-columns: subgridです。列の配置は自分で制御できますが、行はGrid Lanesが決めます。¹
• flow-toleranceは際立った差別化要素です。純粋な最短列への配置だと、タブ順序が視覚的な順序に対してジグザグになり、アクセシビリティを損なうことがあります。flow-tolerance（デフォルトは1em）は最短列のルールを緩め、配置を読み順により近づけます。¹
• 提供状況については正直なところを伝えておきましょう。Safari 26.4では今日から使えますが、他のブラウザではフラグの背後にあります。Grid LanesはまだクロスブラウザでGAには至っていません。¹

Grid LanesがGridとFlexboxの間に位置する理由

Safariチームのブランドンが、3:39からGrid Lanesレイアウトをゼロから組み立てます。

どのレイアウトモードも、同じ2つの問いに答えます。アイテムはどこに置かれるのか、そしてどれだけのスペースが与えられるのか、です。¹ FlexboxとGridはこれらに異なる答え方をし、Grid Lanesはその中間に位置します。

Flexboxは一つの軸と、その軸に沿って流れる一列のアイテムを与えます。アイテムが折り返すときも、選んだ方向、つまり行または列に沿って流れ続けます。¹ Gridは2つの軸、列と行を与え、それらのトラックが交差するセルにアイテムを配置します。問題が現れるのは、アイテムごとにアスペクト比が異なる場合です。背の低いアイテムがセルを埋めきれず、大きな空白が生まれてしまいます。¹ 画像の場合、これは3つの好ましくない選択肢を残します。各画像をセルいっぱいに引き伸ばせば歪み、スペースを埋めるためにズームインすればコンテナからあふれ、トリミングすれば重要な情報を失うおそれがあります。¹

Grid Lanesはこの緊張を解消します。セッションでの説明を借りれば、「これはGridとFlexの間に位置します。Gridのように2次元にわたって構造化するのではなく、ただ一方だけを構造化し、もう一方は自由なままにします。しかし、コンテンツが一列に流れてページの下へ折り返していくFlexとは違い、Grid Lanesはコンテンツを複数のレーンに分散させます。」¹ アイテムは一つずつ配置され、それぞれが最も上に近くなる列に収まります。だからこそ、先のアイテムほど上に位置し、後のアイテムが下を埋めていくのです。¹ このレイアウトは画像だけでなく、あらゆるコンテンツで機能します。テキストブロックは列に合わせて折り返り、ブラウザが高さを決めます。そして見出しは列をまたいで広がり、目立たせることができます。¹

わずか3行のCSSでネイティブmasonry

組み立ては新しいdisplayタイプから始まり、その後はGridと同じやり方でトラックを定義します。

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columnsはトラックの数と、それぞれの幅を設定します。fr単位（「fractional unit（分数単位）」）は、コンテナ内の利用可能なスペースを取り、それを分数に分割するようブラウザに指示します。つまり1fr 1fr 1frは同じ大きさの3列を生み出し、gapはGridとまったく同じように間隔を加えます。¹ 滝のような流れをレンガ壁に変えるには、列を行に入れ替えます。grid-template-columnsをgrid-template-rowsに置き換えれば、アイテムは列で下へではなく、行で横へと流れます。唯一の注意点は、セッションの言葉を借りれば「選べる方向は一つだけ、両方ではない」ということです。¹

この3行は、見た目以上の制御を与えてくれます。列は均等である必要はなく、中央の列を両隣の2倍のスペースにすることもできます。また、列数を自分で固定する代わりに、レスポンシブなGridレイアウトがすでに行っているのと同じように、ブラウザに決めさせることもできます。

.gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

auto-fillは収まる限りの列を作り、minmax()は各列が少なくとも200ピクセルで、スペースを埋めるために広がれることを指定します。¹ 同じ発想を、狭い列と広い列を繰り返すパターンへとさらに進めることもできます。ブランドンが強調する利点はこうです。「私が何より気に入っているのは、ほんの数行のCSSでこれほど多くのことができる点です。」¹

おなじみのGridプロパティで個々のアイテムを形づくる

Grid Lanesは、すでにGridに存在するプロパティでアイテムを形づくります。3つの等しい列を持つgrid-lanesコンテナから始めましょう。あるアイテムにより多くのスペースを与えるには、grid-column: span 2でそれを2列にまたがって広げ、残りのレイアウトがその周りで調整されます。¹ アイテムを正確に配置することもできます。2列目から始まり、2列目と3列目にまたがるように設定するのです。この制約は意図的なものです。「列の配置は制御できますが、行はできません。行はGrid Lanesが決めてくれます。」¹

subgridは、ネストされたコンポーネントの中身を親に折り込みます。2列にまたがるレシピカードには、画像とテキストがありますが、デフォルトではこれらはGrid Lanesのレイアウトに参加しません。カードにdisplay: grid-lanesとgrid-template-columns: subgridを加えると、「その中身が親レイアウトに自身のアイテムとして加わります」。画像が一方の列を、テキストがもう一方の列を取り、それぞれが中身に合わせてサイズ調整されます。¹ ネストはどちらの方向にも機能します。Grid Lanesコンテナの中に通常のグリッドを置いても、その逆でも構いません。同じツールと構文が引き継がれるからです。¹

flow-toleranceダイヤル: アクセシビリティの解決策

ここがGrid Lanesを、単なる小ぎれいなmasonry以上のものにしている部分です。純粋な最短列への配置はほとんどの場合うまく見えますが、ときどき少ししっくりこないことがあり、その理由はアクセシビリティにあります。¹

ほぼ同じ高さの2つのアイテムが1行に並び、アイテム2がアイテム1より数ピクセルだけ低い場合を思い浮かべてください。アイテム2の下の領域がより上に近いため、ブラウザは次のアイテムをそこに配置し、アイテム4が最初の列を埋めます。視覚的な結果は、最初の行では左から右へ、最後の行では右から左へと読めてしまいます。セッションではこう述べられています。「タブ順序とコンテンツが視覚的に現れる順序の違いは、人々のアクセシビリティに影響し、混乱を招く体験を生み出しかねません。」¹ タブ順序はソース順に従いますが、ジグザグな視覚配置は、キーボードやスクリーンリーダーのユーザーが頼りにしている対応関係を壊してしまいます。

flow-toleranceは、最短列のルールを緩めたり締めたりするダイヤルです。¹ これを有効にすると、ブラウザは新しいアイテムごとにこう問いかけます。「背の高い列は、背の低い列にflow-toleranceを足した値より小さいか?」¹ その差がトレランスの範囲内なら、アイテムは配置を読み順に揃えたままにする列を埋めます。差が無視できないほど大きくなると、アイテムは本当に背の低い列へと落ちます。デフォルト値は1emです。

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Appleの指針は、「コンテンツに合うものを見つけるために、さまざまなflow-toleranceの値を試してみる」ことです。¹ ブラウザに柔軟性を与えることの裏返しとして、結果がときに思いがけないものになることがあります。そんなときのために、Web InspectorはGrid Lanesを完全にサポートしています。オーバーレイをオンにすれば、列と行を示す線、各アイテムの上に投影された順序番号（配置がどう行われたかが正確に分かります）、そしてアイテム間に描かれたgapが表示されます。¹

要点

フロントエンド開発者向け: - JavaScriptのmasonryライブラリやFlexboxのハックを、display: grid-lanes、3つのfrトラック、gapに置き換えましょう。すでにおなじみのGridのトラックサイズ指定ツール（auto-fill、minmax()、不均等なfr）をそのまま再利用できます。¹ - アイテムを目立たせるにはgrid-column: span Nと明示的な列の配置を、ネストされたカードの中身を親レイアウトに折り込むにはgrid-template-columns: subgridを活用しましょう。¹

アクセシビリティを重視するチーム向け: - flow-tolerance（デフォルトは1em）を調整して、視覚的な配置をソース順とタブ順序に揃えましょう。これにより、ジグザグなmasonry配置がキーボードやスクリーンリーダーのユーザーに対して生み出すギャップを埋められます。¹ - 配置はWeb InspectorのGrid Lanesオーバーレイで確認しましょう。アイテムの順序番号がレイアウトの上に直接投影されます。¹

ロールアウトを計画する技術リード向け: - Grid Lanesは「Safari 26.4で利用可能、他はフラグ付き、クロスブラウザGAではない」ものとして扱いましょう。プログレッシブエンハンスメントとして提供し、まだフラグの背後にあるブラウザには優雅なフォールバックを用意しましょう。¹

FAQ

CSS Grid Lanesとは何ですか?

CSS Grid Lanesは、masonryスタイルのレイアウトをネイティブに構築するために、SafariチームがWWDC 2026で導入した新しいレイアウトモードです。GridとFlexboxの中間に位置し、一方の軸を構造化してもう一方は自由なままにすることで、アイテムを複数のレーンに分散させ、各アイテム本来の比率を保ったまま、きっちりと詰まった互い違いのレイアウトを生み出します。¹

Grid Lanesでmasonryレイアウトを作るにはどうすればよいですか?

CSSはわずか3行です。display: grid-lanesを設定し、fr単位を使ったgrid-template-columnsでトラックを定義し（たとえば等しい3列なら1fr 1fr 1fr）、gapを加えます。grid-template-columnsをgrid-template-rowsに入れ替えれば、縦の滝を横のレンガ壁に変えられます。選べる方向は一つだけで、両方ではありません。¹

flow-toleranceは何をするものですか?

flow-toleranceは、各アイテムを最短列に配置するルールを緩めたり締めたりします。純粋な最短列への配置だと、視覚的な順序がタブ順序からジグザグに外れ、アクセシビリティを損なうことがあります。flow-toleranceを有効にすると、ブラウザは配置を決める前に、背の高い列が背の低い列にトレランスを足した値より小さいかを確認し、高さの差が大きくなりすぎるまではアイテムを読み順に揃えたままにします。デフォルト値は1emです。¹

今日から本番環境でGrid Lanesを使えますか?

Safari 26.4では今すぐ利用できます。他のブラウザではフラグの背後にあるため、Grid LanesはまだクロスブラウザでGAには至っていません。まだフラグを必要とするブラウザのために、フォールバックを用意したプログレッシブエンハンスメントとして提供しましょう。¹

Grid Lanesは、すでに知っているGridプロパティで動作しますか?

はい。アイテムレベルの配置には既存のGridプロパティを使います。grid-column: span 2はアイテムの幅を広げ、明示的な列の配置はそれを位置づけ、grid-template-columns: subgridはネストされたコンポーネントの中身を親レイアウトに折り込みます。列の配置は自分で制御し、行はGrid Lanesが決めます。¹

実際に構築を始めたときの実践的なリファレンスとして、WebKitはgridlanes.webkit.orgで公式のGrid Lanesフィールドガイドを提供しています。パネルでは、Grid Lanesが新しいカスタマイズ可能なselectと組み合わせられることが指摘されました。masonryレイアウトは::picker(select)のドロップダウンの中でも機能します。²

Grid Lanesは、依存関係を追加するのではなく削除するタイプのプラットフォーム機能の追加です。これはまさにno-build宣言の主張そのものであり、Lighthouseで満点を取った記録に綴られたような結果への直接の道でもあります。JavaScriptでレンダリングされるグリッドではなく、ネイティブでセマンティックなレイアウトを提供することは、マークアップを機械にとっても読みやすく保ちます。これはHTMLはエージェントが求めるフォーマットで論じた点です。シリーズ全体のハブはApple Ecosystem Seriesです。

参考文献