
CSS Grid Lanes
## Japanese Translation: > **Safari Technology Preview 234 は CSS Grid Lanes を導入しました**。これは、開発者が JavaScript なしで CSS 内で直接モザイク風グリッドを構築できる新しいレイアウトモードです。 > > 開発者は `display: grid-lanes;` と標準の Grid 構文(`grid-template-columns`、`repeat(auto-fill, …)` など)を組み合わせて柔軟なレーンを作成します。アイテムは自動的に最も近い上部レーンに配置され、無限スクロールとタブフレンドリーなナビゲーションが可能になります。 > > **高度な機能** には、レーンサイズの変更(`minmax(8rem, 1fr) minmax(16rem, 2fr)`)、アイテムの跨ぎ(`grid-column: span N`)、明示的配置(`grid-column: -3 / -1`)および新しい `item-tolerance` プロパティ(デフォルトは `1em`)が含まれます。これは、サイズ差に基づいてアイテムがレーンをどれだけ積極的にシフトするかを制御します。レーンは列方向(「ウォーターフォール」)または行方向(「レンガレイアウト」)で向きを設定でき、デフォルトの流れは通常です。 > > 実装は 2022 年中頃に開始され、Safari TP 234 で利用可能です。ライブデモは <https://webkit.org/demos/grid3>(写真ギャラリー、ニュースレイアウト、博物館サイト、メガメニューフッター)でホストされています。CSS Working Group はまだプロパティ名と向きの構文(`grid-lanes-direction` か `grid-auto-flow` の再利用)を最終化中です。その決定が下り次第、この機能は本番環境で使用できるようになります。 > > 開発者にとって、これは追加の JavaScript を必要とせず、より高速でパフォーマンスの高いレスポンシブレイアウトを実現することを意味し、ブラウザベンダーは同様の機能を採用する可能性があり、将来のウェブデザイン標準に影響を与えるでしょう。


























