CSS Grid Lanes

 (webkit.org)
6 ポイント 投稿者 GN⁺ 2025-12-20 | 2件のコメント | WhatsAppで共有
  • Webでmasonryレイアウトを実装するための新しいCSS機能Grid LanesがSafari Technology Preview 234に導入
  • display: grid-lanesプロパティを使ってメディアクエリなしのレスポンシブグリッドを構成でき、grid-template-columnsで柔軟な列定義が可能
  • item-toleranceプロパティにより項目配置の敏感度を調整し、コンテンツサイズの違いによる視覚的な不均衡を緩和
  • 列方向と行方向の両方をサポートし、grid-template-columnsまたはgrid-template-rowsの定義に応じて自動的にフローを決定
  • CSS Working Groupが一部の詳細なプロパティ名を議論中で、WebKitチームは標準化と実装を並行して進め、開発者による実験を推奨

CSS Grid Lanesの概要

  • Grid Lanesは、WebでmasonryスタイルのレイアウトをネイティブCSSで実装するための新しい表示モード
    • display: grid-lanesを使い、既存のgridに似た構文で構成
    • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))で最小250px幅の柔軟な列を生成
  • gapプロパティで項目間の間隔を指定し、メディアクエリなしですべての画面サイズに対応
  • Safari Technology Preview 234で試用可能で、WebKitのデモページも提供

Grid Lanesの動作方式

  • ブラウザが各項目を最も上端に近い列へ自動配置
    • Masonry.jsと同様に、次の項目は現在最も短い列に追加される
    • ユーザーはタブ移動時に現在表示されているコンテンツを横方向に探索できる
  • 無限スクロールのコンテンツ読み込み時にもJavaScriptなしで自動整列が可能

CSS Gridの拡張機能

  • laneサイズの多様化: grid-template-*構文で狭い列と広い列を交互に配置可能
    • 例: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
  • **項目の拡張(span)**をサポート
    • 特定の項目を複数列にまたがって配置可能（grid-column: span 4など）
    • 例のデモ: 新聞記事風レイアウト
  • 明示的な配置も可能
    • 例: header { grid-column: -3 / -1; }で最後の列にヘッダーを固定

方向切り替え機能

  • **列ベース（waterfall）と行ベース（brick）**のレイアウトの両方をサポート
    • grid-template-columnsを定義すると列方向、grid-template-rowsを定義すると行方向に自動設定
  • grid-auto-flow: normalがデフォルト値で、定義された方向に応じて自動判断
  • CSS Working Groupはフロー制御用プロパティ（grid-lanes-directionなど）の名称を議論中
    • 関連する議論はGitHubのCSSWG-drafts issueで進行中

配置感度の調整: item-tolerance

  • **item-tolerance**は、項目配置時にサイズ差をどの程度厳密に区別するかを決定
    • デフォルト値は1emで、これより小さい差は同じ高さと見なされる
    • 値が大きいほど項目は左右に移動しにくくなり、小さいほど細かな位置調整が発生
  • アクセシビリティの観点では、タブ移動時の視覚的なジャンプを最小化するため適切な値の設定が必要
  • プロパティ名は現在item-toleranceとして定義されているが、flow-toleranceまたはpack-toleranceに変更される可能性がある

実験と活用例

  • Safari Technology Preview 234で複数のデモを提供
    • 写真ギャラリー、新聞風記事、博物館サイト、メガメニューレイアウトなど
  • 例のコード: 
    .container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}
  • 画像だけでなく、リンクの多いフッターやメニュー構成にも有用

今後の計画

  • CSS Working Groupが残るプロパティ名の決定を進行中
  • WebKitチームは2022年半ばから実装と標準化作業を並行して進めている
  • 開発者にはデモ制作とフィードバック参加を推奨
    • Jen SimmonsはBlueskyとMastodonを通じて意見を募集中
  • 基本文法は安定しており、実際のプロジェクトへ適用する準備が整っている

関連記事

2件のコメント

 
shakespeares 2025-12-21

ということは、Safari向けの Grid-lanes と Firefox向けの grid を別々に書かなきゃいけないってことですよね。Web標準としてもう少し揃えてください…。
 
GN⁺ 2025-12-20
Hacker Newsの意見

  • Safariチームに拍手を送りたい。10月に突然 Interop 2025順位 の最上位に躍り出たのは本当に驚きだった

    • iOS 26以降、Safariが大規模なWeb機能アップデートを受けたことを実感した。WebGPUだけでなく、OPFS APIの欠けていた部分も埋まり、今では実運用が可能になった。さらに field-sizing CSSプロパティ も追加され、テキスト入力欄が入力内容に合わせて自動で広がる問題も解決した
    • Safariは大きなリリースのたびに「最高のブラウザ」と評価されるが、それ以外の時期には批判を多く受ける傾向がある。これは他のブラウザが継続的アップデートを行う一方で、Safariが従来型のリリース周期に従っているからだと思う
    • 実際のところ、驚くようなことではない。ここ数年、Safariチームが最新のHTMLとCSS機能を着実に出してきたのを見てきた
    • ChromeチームがWebPCIeのような実験的機能を宣伝している間、Safariはユーザーが実際に求める機能を提供してきた。たとえば、ぼかし背景効果のようなものをずっと早くからサポートしていた
    • ただ、Safariがまだ64ビットwasmをサポートしていないのは残念。WebAssembly機能一覧 では「100%サポート」となっているが、実際には重要な部分が欠けている

  • CSS Gap Decorations 機能が早く出てほしい。flexやgridアイテムの間にきれいな境界線を作るために不要なハックを使い続けるのはもううんざりだ

    • テーブルを使ってみてはどうか、と提案したい。以前よりずっと良くなっているのに、私たちはいつもさらに多くを求める。人間は決して満足しない存在のようだ

  • 最近のプロジェクトでMasonryレイアウトを使ったが、パフォーマンスは悪くないものの、absolute positioning ベースなのでかなりハッキーだ。オブジェクトの縦横比を事前に知っている必要があり、リサイズ時には再計算もしなければならない。だからネイティブサポートが早く出ることを期待している

    • 私もまったく同感だ。CSSがこの問題を解決してくれるのを待ちながら、2019年から自分のホームページから最後の1.3KBのJavaScriptを取り除ける日を待っている。この機能を作っているすべての人に感謝したい

  • こうした発表は素晴らしいが、どこか悲喜劇のような面もある。Appleがブラウザを継続的に更新しないせいで、新機能を実際に信頼して使える時期はかなり先になってしまう

  • Masonryレイアウトは見た目は良いが、画像全体をひと目で把握しづらいと思う

    • Web「デザイン」の多くは使いやすさより見た目に集中している。実際に製品を使う人はほとんどおらず、スクロールアニメーションを見て「かっこいい」と言うだけだ
    • 画像がすべて横長か縦長なら問題ないが、混在するとレイアウトがぐちゃぐちゃになる

  • なぜMasonryと呼ばなかったのか不思議だ。それでもgrid-lanesという名前は説明的で理解しやすい

  • LLMがこういう新しいCSS構文を正確に学習するのにどれくらいかかるのか気になる

  • 任意のサイズと位置のテキストグリッドでできたWebページを見なければならないくらいなら、いっそ誰かに撃ってほしい
    新聞風グリッドのデモ画像

    • 新聞を読んだことがないのか？
    • 私はこういうデザインは良いと思う。新聞のような非対称だが効率的なレイアウトをWebで実現できる
    • ただ、これはデザインの基本原則である整列とグループ化に反しているように感じる
    • 面白いことに、私はそれが本当にかっこいいと思う
    • NYTimes.comがまさにそういう例として思い浮かぶ

  • 個人的にはlaneレイアウトが嫌いだ。リストのすべての要素を順番に見ていくのが難しく、視線が上下に飛ぶので認知的な疲労が大きい

    • ただ、すべての要素を系統立てて見る必要がないなら、laneレイアウトも悪くない。Pinterestのようにコンテンツをひと目で取り込むサイトには向いている
    • 見た目は良いが、深く使うには不便なレイアウトだ
    • 目的は効率性ではなく、全体をひと目で見せることだ。新聞や写真ギャラリーのように
    • 流行が終わりかけた頃に機能が出てくるのが皮肉だ。UX的にはいまひとつだが、視覚的にはきれいだ
    • 右脳型デザインっぽい。PinterestやHome Assistantのようなサイトには合う

  • AppleはSafariをすべてのプラットフォームで安定してダウンロードできるようにすべきだと思う

    • 昔、Windows XPにSafariをインストールした記憶がある。あの失敗作以来、まだ十分な時間が経っていないのだろう
    • ただ、間接的には可能になるかもしれない。Kagiの新しいブラウザがWebKitを使っていて、今はmacOS専用だが、Windows版もいずれ出る予定だ