実績紹介やブログの一覧で、高さの違うカードを並べると、行ごとに一番高いカードに揃って下に隙間ができます。この隙間を詰める「メイソンリー（石積み）配置」は、これまでJavaScriptのライブラリか、段組み（columns）で近い見た目を作るのが一般的でした。段組みは上から下へ流し込むため、新しい記事が左の列の下に入ってしまい、「左上から新しい順」に並べたい一覧には向きません。
CSSではこの配置を display: grid-lanes で書く仕様が進んでいます。ただし、2026年11月11日時点で既定で使えるのはSafariだけです。本記事では、各ブラウザのリリースノートやソースコード、MDNの互換性データで対応状況を確かめ、Chromiumで実際に表示を比べた結果から、今の時点での使い方を整理します。
grid-lanesは何を変えるのか
MDNのガイド「Grid lanes layout」は、CSSグリッドレイアウト仕様のレベル3が、display の値 grid-lanes と inline-grid-lanes で使う配置方法を定義していると説明しています。一方の軸は通常のグリッドと同じ厳密なトラック、もう一方の軸は詰めて積み上げる配置です。各アイテムは、空きが最も大きいレーン（列）に置かれます。
書き方は、普段のグリッドとほぼ同じです。
.works {
display: grid-lanes;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}列の幅は grid-template-columns で決め、行の高さは決めません。span で2列にまたがるカードを作ることも、grid-column で列を指定して置くこともできます。列を指定したアイテムは、詰める処理より先に配置されます。
なお、以前に試験的に実装されていた grid-template-rows: masonry という書き方は、仕様では grid-lanes に置き換えられました。MDNのFirefox 159（2026年10月27日リリース）の開発者向けリリースノートには、この旧構文（grid-template-columns と grid-template-rows の masonry の値、masonry-auto-flow プロパティ）を削除したとあります。この旧構文は、もともとFirefoxのNightlyでしか既定で有効ではありませんでした。古い記事のコード例をそのまま使わないようにします。
2026年11月時点の対応状況
対応状況は、MDNの互換性データ（mdn/browser-compat-data）と、各ブラウザのソースコードにある機能の有効化の設定で確かめました。Safariは、Appleの「Safari 26.4 Release Notes」（2026年3月24日リリース）にも「Added support for CSS display: grid-lanes.」とあります。
| ブラウザ | 互換性データ | ソースコードの設定 |
|---|---|---|
| Safari（macOS・iOS） | 26.4で対応 | WebKitの GridLanesEnabled は status: stable、既定値 true |
| Chrome・Edge | 未対応 | Chromiumの CSSGridLanesLayout は status: experimental |
| Firefox | プレビュー | layout.css.display-grid-lanes.enabled の値はNightlyのビルドのときだけ true |
Chromiumの設定ファイルの説明では、experimental の機能は安定版では既定で無効で、chrome://flags の「Experimental Web Platform features」を有効にすると使えます。つまり、一般の利用者の大半が使うChromeとEdgeでは、まだ grid-lanes は効きません。互換性データの区分も「experimental（試験的）」のままです。
Chromeの機能の予定をまとめた「Chrome Platform Status」では、Chrome 140から開発者がフラグで試せる段階（Dev trial）として登録されており、正式に出す時期は書かれていません。実装状況の欄は「No active development」となっていますが、同じページの注記は「まだ実装中」としており、10月にも、後で触れる名前の変更がChromiumに入っています。どちらにしても、Chromeで既定で使える時期は、まだ見通せません。
Chromiumで表示を比べた
ドラフトを書いた2026年11月9日に、編集部が使ったLinuxのクラウド環境で、Playwrightに同梱されたChromium（153.0.8010.12、ヘッドレス）を使い、同じHTMLを2通りの起動方法で開きました。テスト用のページは、幅200pxの3列のグリッドに、高さ100・200・60・80・120・90pxの6枚のカードを置いたものです。@supports (display: grid-lanes) が真のときだけ display: grid-lanes に切り替えます。
.works {
display: grid;
grid-template-columns: repeat(3, 200px);
gap: 10px;
}
@supports (display: grid-lanes) {
.works { display: grid-lanes; }
}結果は次のとおりです。
- 既定の起動:
CSS.supports('display', 'grid-lanes')は false。displayの計算値はgridのままで、カードは2行に揃い、1行目の高いカードの下に隙間が残りました。コンテナの高さは330px - Experimental Web Platform featuresを有効にした起動（
--enable-experimental-web-platform-features）:CSS.supportsは true、計算値はgrid-lanes。カードが空いている列に詰められ、コンテナの高さは290pxになりました
@supports で分けておけば、対応していないブラウザでは普段のグリッドの表示になり、崩れはしません。対応しているブラウザでだけ隙間が詰まる、という段階的な強化として使えます。
配置の順番は「一番空いた列」とは限らない
検証の途中で、文字の大きさを変えただけで、カードの入る列が変わりました。4枚目のカードは、1列目（上から110pxの位置が空いている）と3列目（70pxの位置が空いている）のどちらに入るかが分かれ目でした。文字サイズが40pxのページでは1列目に入り、フラグを有効にしたまま許容差を0にすると、最も空いている3列目に入りました。
理由は、仕様の fit-tolerance プロパティにあります。CSSWGの編集者草案（css-grid-3）では、列の空きの差がこの値以内なら「同じくらい空いている」とみなし、前の列から順に埋めると定義しています。初期値の normal は、grid-lanesでは 1em として扱われます。40pxの文字サイズでは1emが40pxなので、110pxと70pxの差の40pxは「同じくらい」に入り、先にある1列目が選ばれた、というわけです。
もう一つの注意は、プロパティの名前です。CSSWGは2026年10月に、仕様の flow-tolerance を fit-tolerance に改名しました。各ブラウザの対応は次のとおりで、版によって受け付ける名前が違います。
- Safari: 26.4は
flow-toleranceで対応しました（26.4のリリースノートと互換性データ）。2026年10月26日の Safari 27.2 でfit-toleranceに改め、flow-toleranceは非推奨の別名として当面は使えます（27.2のリリースノートとWebKitのブログ）。互換性データには、11月11日時点でこの改名がまだ反映されていません - Chromium: 試したChromium 153が受け付けたのは古い
flow-toleranceだけでした（CSS.supports('fit-tolerance', '0')は false）。Chromiumでは10月14日にfit-toleranceへの改名が入り、Chrome 158（安定版の予定は11月17日）から含まれます。現在のプロパティの定義にはflow-toleranceの別名が残っていません（158での表示は試していません） - Firefox: Nightlyで、grid-lanesと同じ設定の裏に
fit-toleranceが加わりました
古い版と新しい版のどちらでも効くようにするなら、両方の名前を並べて書くことになります。
@supports (display: grid-lanes) {
.works {
display: grid-lanes;
flow-tolerance: 0; /* 旧名（Safari 26.4〜27.1、Chrome 157まで） */
fit-tolerance: 0; /* 仕様の名前（Safari 27.2以降、Chrome 158以降） */
}
}見た目の順番とキーボードの順番がずれる
仕様草案には「Reordering and Accessibility」という節があり、grid-lanesの自動配置では、読む順番に対して前後に行き来するような配置が起きうると書かれています。とくに、列をまたぐカードや列を指定したカードを混ぜると、後のカードが前のカードより上に入ることがあります。草案は、こうした行き来が少ない作りにすること、項目に順番の意味がない場合は reading-flow プロパティでブラウザに読む順番を並べ替えさせることを挙げています。
ここからは編集部の整理です。実績やお知らせの一覧のように「新しい順」に意味がある場合、HTMLの順番（スクリーンリーダーやTabキーで移動する順番）と、目で見て追う順番がずれると、利用者が迷います。次の3点を目安にすると、ずれを抑えやすくなります。
- 列をまたぐカード（
span）と高さの大きく違うカードを、同じ一覧で混ぜない - 許容差を大きめにして、近い高さの列は左から順に埋める（WebKitのブログも、Tabキーで移動する利用者のために、ほとんどの場合は値をかなり大きくするよう勧めています）
- カードの中のリンクをTabキーで順にたどり、移動の順番が見た目と大きく食い違わないか確かめる
一覧のレイアウトをCSSの新しい機能で組み直すときは、Web Platform Baselineで設計を考える記事のように、どのブラウザで効かなくても困らない作りにしておくのが基本です。グリッドの隙間に線を引く新しい仕様は、CSSのgap decorationsの記事で扱いました。
今の時点でどう使うか
既定で有効なのがSafariだけである以上、grid-lanes を前提にしたデザインは、まだ組めません。使うとすれば、次のような形です。
- 通常の
display: gridで、隙間が残っても見栄えが崩れない一覧を作る @supports (display: grid-lanes)の中でだけgrid-lanesに切り替える- Safari（実機）と、フラグを有効にしたChromeで表示とTabキーの順番を確かめる
- 許容差を調整する場合は、
flow-toleranceとfit-toleranceの両方を書く
JavaScriptのメイソンリーのライブラリを使っているサイトを、すぐにCSSへ置き換える段階ではありません。新しく一覧を作るときに、将来の置き換えの余地を残しておく、という使い方が現実的です。
確認した範囲
2026年11月9日に、MDNのガイド「Grid lanes layout」とFirefox 159の開発者向けリリースノート（mdn/content、d560306）、MDNの互換性データ（mdn/browser-compat-data、82daeeb）、WebKitの
UnifiedWebPreferences.yaml、Chromiumのruntime_enabled_features.json5、FirefoxのStaticPrefList.yaml（いずれも同日のmainブランチ）、CSSWGの編集者草案css-grid-3のソース（w3c/csswg-drafts、b6771fb）を確認しました（資料調査）。公開前の2026年11月11日に、公開中のMDN・CSSWGの編集者草案（10月21日版）・互換性データ（c98444a）・各ブラウザのソースの設定を確かめ直し、AppleのSafari 26.4と27.2のリリースノート、WebKitのブログ「WebKit Features for Safari 27.2」、Chrome Platform Status、Chromiumの改名のコミット（957a2cc）も確認しました。表示の比較は、Linuxのクラウド環境でPlaywright同梱のChromium 153.0.8010.12（ヘッドレス）を使い、各条件1回ずつ行いました（実機検証）。Safari、Firefox Nightly、Chrome 158以降、Windows・macOS・スマートフォンでの表示は確認していません。
コーポレートサイトの一覧ページの作り直しや、新しいCSSの取り入れ方は、HP制作・リニューアル相談で承っています。対応するブラウザの範囲によって作り方が変わるため、お問い合わせからご相談ください。
参考資料
- Grid lanes layout（MDN）
- Firefox 159 release notes for developers（MDN）
- mdn/browser-compat-data — css/properties/display.json
- mdn/browser-compat-data — css/properties/fit-tolerance.json
- CSS Grid Layout Module Level 3（編集者草案）
- Safari 26.4 Release Notes（Apple Developer）
- Safari 27.2 Release Notes（Apple Developer）
- WebKit Features for Safari 27.2（WebKit Blog）
- CSS Grid-Lanes (i.e. Masonry)（Chrome Platform Status）
- Chromium — [Masonry] Rename flow-tolerance to fit-tolerance
- WebKit — UnifiedWebPreferences.yaml
- Chromium — runtime_enabled_features.json5
- Firefox — StaticPrefList.yaml
