Grid Lanesのfit-toleranceを使う｜カードの詰め方とフォーカス順序を検証する

Safari 27.2では、CSS Grid Lanesの配置調整プロパティがflow-toleranceからfit-toleranceへ変わりました。高さの異なる記事カードや写真を詰めて並べる画面を作っているチームは、既存CSSの名前だけでなく、次のカードがどの列へ置かれるかも確認する必要があります。余白を減らすことと、キーボードで次の項目を見つけやすくすることを、一緒に評価します。

根拠は2026年10月26日公開のWebKitのSafari 27.2公式発表です。本稿は10月30日に確認した資料に基づく動向と実装の解説です。コードと数値例は検証のために本サイトが作成したもので、Safari実機での実行結果ではありません。標準のGridを基礎に、対応環境へ段階的に追加する方法を扱います。

今回変わったのは既存機能の名前と移行先

Grid LanesそのものはSafari 26.4で導入済みであり、27.2で初めて使えるようになった機能ではありません。WebKitは旧名flow-toleranceを、当面は非推奨の別名として維持すると説明しています。旧名がすぐ無効になるという意味ではありませんが、新しく書く部分と既存の設定を整理する際にはfit-toleranceを基準にします。

仕様はまだ動いています。今回参照したCSS Grid Layout Level 3は編集者草案で、完成した勧告として扱えません。また、Safariの提供状況から他のブラウザーの対応版を推測しないでください。Grid Lanesに対応することと、新しいプロパティ名に対応することを分け、対象環境の表示を確認します。

普通のGridとGrid Lanesを選び分ける

通常のGridは行と列のそろった配置に向きます。カードの高さに差があっても、同じ行の境界を共有することで比較しやすくなります。Grid Lanesは一方向のレーンへ項目を積み、空きが多い側へ次の項目を配置する仕組みです。写真や短い記事要約など、高さが異なる項目を一覧で見せる用途が候補になります。

商品仕様を行単位で見比べる画面や、手順の順番が重要な画面まで、空きが減るという理由だけで置き換える必要はありません。視覚的に詰めるほど読みやすくなるとは限らないためです。まず、項目の順序に意味があるか、行のそろいが比較に役立つか、カードを読む利用者が次の項目をどこに期待するかを整理します。

fit-toleranceは高さの近い列を同点扱いする

配置精度の定義はCSS Grid Level 3のfit-tolerance節で確認できます。最も短い配置位置との差が指定距離内なら、候補を同点として扱います。小さな高さの違いをどこまで無視するかのしきい値であり、カード間の余白を直接指定するgapとは役割が違います。

例えば、次のカードを置ける高さが三列で320px、328px、324pxだったと仮定します。許容差0pxなら最も短い320pxの位置が候補です。許容差16pxなら三列は同点の範囲へ入り、単に8pxだけ上へ詰めることを優先しない配置になります。これは仕組みを説明する仮想例で、特定のHTMLから得た実測値ではありません。

草案では初期値normalがGrid Lanesで1emとして使われます。許容差を小さくすると細かな高さの違いで置き先が変わり、大きくすると近い高さを同じとみなす範囲が広がります。ただし大きくすれば必ず読みやすくなるわけではありません。高さが大きく異なる項目まで同点にすると、フォーカスが上下へ大きく動く配置にもなり得ます。

まず通常のGridで情報を読める状態を作る

以下はカード一覧を通常のGridとして表示し、Grid Lanesと新しい名前を理解する環境だけ拡張するCSS例です。既存のカード本文とリンクをそのまま使い、レイアウトのためにDOM順を入れ替えません。16rem、2rem、余白の値はサンプル用であり、仕様が定める推奨値ではありません。

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(min(16rem, 100%), 1fr)
  );
  gap: 1rem;
  align-items: start;
}
.card {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.card a:focus-visible {
  outline: 3px solid #9b3f25;
  outline-offset: 4px;
}
@supports (display: grid-lanes) and (fit-tolerance: 2rem) {
  .cards {
    display: grid-lanes;
    fit-tolerance: 2rem;
  }
}

この例は両方の構文に対応する環境でだけ切り替えるため、Grid Lanesに対応していても新名を理解しない環境では通常のGridを残します。旧名を併記して古い環境にも拡張を届ける方法とは違う方針です。対応範囲を広げたい場合も、先に必要なブラウザーの版を決め、旧名を残す理由と外す条件を管理してください。

@supportsの成立は構文を受け付けるという確認であり、読み上げやフォーカス移動の品質を保証しません。条件が真になったことだけを採用完了にせず、実際のカードと入力方法で試します。追加CSSを外せば通常のGridへ戻れるよう、拡張部分をまとめておくと、問題が出たときの比較もしやすくなります。

HTMLの順序を先に決めてから詰め方を変える

WebKitのGrid Lanesの解説は、許容差が低すぎても高すぎても移動を追いにくくなる点を説明しています。見た目の空白が減っても、Tabキーで次に移る項目を目で探す必要が増えるなら、利用体験が改善したとは判定できません。

最初の試験では、一カードに代表的なリンクを一つ置き、先頭から順に移動します。DOMの順序を編集上の優先順にして、画面の左右や上下と大きく食い違わないかを見ます。複数リンクやボタンを持つ本番カードでは、カード間の移動とカード内の移動を分けて確認してください。フォーカスの枠が他のカードに隠れないことも対象です。

列をまたぐ強調カードや、特定列への明示配置は最初の比較へ混ぜません。草案も、幅をまたぐ項目と高さの差が組み合わさると、後続項目が前の項目より上に見える場合を示しています。単純な一列幅のカードで方針を決めてから、強調カードを追加して順序を再確認する方が、何が変化を生んだかを追いやすくなります。

実際の文章量と読み込み後の高さで比較する

同じ短文のカードだけでは、許容差の効果を判断しにくくなります。短い見出しと長い見出し、画像ありとなし、説明文の長短を混ぜ、CMSから入り得る内容を用意します。一方で、一つだけ極端な巨大カードを置いた結果を、普段の一覧全体へ一般化しないようにします。検証用の組み合わせと通常の掲載比率を分けて記録します。

画像とWebフォントの読み込み前後にも注目します。最初に見えた配置だけでなく、内容の高さが確定した後でフォーカスの位置を追えるかを確認します。画像の実際の比率に合う寸法を設定し、カードの情報を切らずに安定させる設計も必要です。fit-toleranceを調整するだけで、すべてのレイアウト変化が解消すると考えないでください。

画面幅の変更と文字の拡大も別々に試します。列数が変われば配置候補も変わり、同じemやremの値でも画面内の見え方は変わります。スマートフォンの一列表示では差が小さくても、デスクトップの多列で移動が分かりにくくなる場合があります。広い画面の完成図一枚だけで承認せず、狭い状態でも情報の順序が保たれるかを見ます。

値を変える試験は三条件から始める

比較用には0px、normal、少し大きい値という三条件を用意します。大きい値はカードの文章量に合わせた試験値を決め、変更するのはfit-toleranceだけにします。同時に列幅、余白、カードの本文を変えると、読みやすくなった理由が分からなくなります。最大限詰められた配置を自動的に合格にするのではなく、移動を追えることも判定表へ入れます。

記録にはブラウザーとOSの版、コンテナー幅、カードのデータ、許容差、Tab移動で迷った場所を残します。フォーカスがどこへ飛んだかをカード名で記録すれば、担当者が変わっても同じ箇所を比較できます。見た目だけでなく、読み上げでの順序や見出しの理解も確認し、未確認の組み合わせは未確認のまま残します。

調整の感覚をつかむには、WebKitのField Guideも参考になります。ただし10月30日に取得した同ページには旧名flow-toleranceの表記が残っていました。デモの旧名を新規コードへ無条件に写さず、今回の発表と草案を併せて読み、新しい名前と対象環境を確認してください。

旧名を置き換えるときの確認点

既存コードはflow-toleranceの宣言だけでなく、機能判定、設定を生成する処理、テスト用スタイル、デザインシステムの説明を検索します。CSSの値を変えず名前だけを更新する差分と、配置方針として値を変える差分を分けてください。更新後は計算済みスタイルと実際の配置を確認し、無視された宣言を別ルールが隠していないかも調べます。

旧名が当面使えることを、永久互換の約束と解釈しないことも大切です。一方、旧版の利用者がいる状況で、名前だけを新しくすれば全環境で同じになるとも限りません。今回の例のように通常のGridへ戻すか、検証した旧名の併記を維持するかを、対象環境の条件と一緒に選びます。変更日と確認した版を残すと次回の見直しにつながります。

導入は一つのカード一覧から始める

初回は、順序の厳密さより一覧性が重要な関連記事や作品ギャラリーなどへ絞ります。通常のGridでの表示を保持し、空きの改善とフォーカス移動を比較します。採用条件は、内容が欠けない、未対応環境でも読める、主要な入力方法で次の項目を見つけられる、という具体的な操作に置きます。

fit-toleranceの名称変更は、単なる検索置換に加えて、カードの詰め方を見直す機会です。値を小さくするか大きくするかは、素材の高さと利用者の移動の両方で決めます。公式発表が説明する挙動と、自分たちが確認した結果を区別し、問題があれば拡張CSSを外して戻せる状態で段階導入してください。

関連記事

カードが横へはみ出す場合は、長いURLでCSS Gridがはみ出す原因と直し方のように、列と要素の最小幅を先に確認します。fit-toleranceは配置位置の許容差であり、長い文字列や固定幅のはみ出しを直す指定ではありません。

参考資料

WebKit：Safari 27.2の機能と改善（2026年10月26日）
CSSWG：CSS Grid Layout Level 3 編集者草案（fit-tolerance・配置とアクセシビリティ）
WebKit：Introducing CSS Grid Lanes
WebKit：The Field Guide to CSS Grid Lanes（旧名の表記あり）