2026年01月10日 09時00分ソフトウェア

CSSグリッドレーン(Grid Lanes)とは何なのかをWebKit公式が解説

ウェブデザインにおいて「Masonry(石組み)レイアウト」は古くからデザイナーの悩みの種であり、いくつもの解決法が提示されてきました。2025年の暮れにW3Cによって草案がまとめられたCSSグリッドレーン(Grid Lanes)は、石組みレイアウトを実現するための新たなCSS機能です。今後のウェブデザインを語る上で無視できないCSSグリッドレーンについて、仕様策定に深くかかわってきたWebKit公式が「CSSグリッドレーンとは何なのか」を解説しています。

Introducing CSS Grid Lanes | WebKit
https://webkit.org/blog/17660/introducing-css-grid-lanes/

Grid Lanesの使い方を説明するにあたって、コンテナ要素に複数の子要素を持つ以下のHTMLを使用します。

<main class="container">
  <figure><img src="photo-1.jpg"></figure>
  <figure><img src="photo-2.jpg"></figure>
  <figure><img src="photo-3.jpg"></figure>
  <!-- 以下略 -->
</main>

コンテナ要素に対して以下のCSSを適用します。

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

上記のCSSを適用することによりどこかで見たことがあるような以下のデザインを、ライブラリを使用することなくわずか3行のCSSで実装できます。

先程のCSSが指示した内容をもう少し詳しく見てみると以下の内容となります。

・display: grid-lanes：グリッドレーンレイアウトを指定
・grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))：最小で250ピクセル幅のフレキシブルカラムを作成
・gap: 16px：レーン間・レーン内のアイテム間にそれぞれ16ピクセルのギャップを挿入

グリッドレーンレイアウトにおけるアイテム配置の挙動はウィンドウの上部に最も近いレーンに順次配置されていくというものです。身近な似た例として「渋滞している高速道路」を想像するとわかりやすいかも知れません。各々の車は「車線変更」を行い「最も前方」に行けるレーンを選択します。グリッドレーンレイアウトならばユーザーはタブキーによってレーンを移動し、現在表示されているすべてのコンテンツに順次アクセスできます。最初のレーンを一番下まで移動してから次のレーンの先頭に戻るような煩わしい操作は必要ありません。また、ユーザーがスクロールするごとにコンテンツを無限に読み込み続けるサイトを、JavaScriptによるレイアウト操作なしに構築することも可能です。

グリッドレーンレイアウトではgrid-template-columnsを用いてレーンを定義することでCSS Gridの機能をフルに活用できるため、クリエイティブなデザインのバリエーションを簡単に作成できます。例えば、ビューポートのサイズに応じて列数がどんなに変化しても最初の列と最後の列は常に狭く、また狭い列と広い列が交互に配置される柔軟なレイアウトを構築する場合を考えてみます。

実装に必要な変更は、先程のCSSに以下の1行を追加するだけです。

grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);

Gridレイアウトの機能をフル活用できるということは、アイテムがレーンを跨ぐ配置も当然可能です。以下の例では幅や高さが全て同一で左右対称な「10年来主流だったデザイン」とは一線を画すダイナミックなデザインとなっています。

実現するには以下のCSSを適用します。

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  gap: 2lh;
}
article {
  grid-column: span 1;
}
@media (1250px < width) {
  article:nth-child(1) {
    grid-column: span 4;
  }
  article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8) { 
    grid-column: span 2;
  }
}

CSSで何を行っているのかを簡単にまとめると以下のようになります。

・すべてのアイテム：1つのレーンに収まるよう表示する
・1番目のアイテム：画面幅が1250ピクセルを超える場合のみ、4つのレーンに収まるよう表示する
・2～8番目のアイテム：画面幅が1250ピクセルを超える場合のみ、2つのレーンに収まるよう表示する

アイテムの表示されるレーンを指定することもできます。以下の例では「ヘッダー」は列数に関係なく常に最後の列に表示されます。

CSSは以下の通りです。

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}
header {
  grid-column: -3 / -1;
}

ここまでの例はすべてコンテンツを縦方向に配置する「ウォーターフォール」形式でした。しかし、グリッドレーンはコンテンツを横方向に配置する「ブリック」レイアウト形式も作成できます。

グリッドレーンレイアウトでgrid-template-columnsを使用して列を指定すると、ブラウザは自動的にウォーターフォールレイアウトを作成します。

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

ブリックレイアウトにしたい場合は、grid-template-columnsの代わりにgrid-template-rowsを使用して行を定義します。

.container {
  display: grid-lanes;
  grid-template-rows: 1fr 1fr 1fr;
}

ウォーターフォールになるのかブリックになるのかを自動的に決定する鍵を握るのはgrid-auto-flowに新規追加されたデフォルト値「normal」です。デフォルト値normalである場合はgrid-template-columnsとgrid-template-rowsのいずれがレーンの定義に使用されたかによってレイアウトが決定されます。実はどのプロパティがフロー方向を明示的に制御するのか、またどのような構文になるかは未だにCSSワーキンググループで議論が続いている状態です。しかしながら、いずれにせよnormalがデフォルト値となる点は変わらないため、グリッドレーンを学ぶにあたりこの決定を待つ必要はないとのこと。

最後に、グリッドレーンのために新たに作られた概念である「許容度」について見ていきます。これはアイテムをどこに配置するのかを決定するレイアウトアルゴリズムの厳格さを調整するためのものです。「渋滞している高速道路」の例を用いるならば、車の長さの微妙な違いをどれだけ「車線変更」に反映するかということになります。以下の図では各レーンの先頭車両の長さに注目すると車4が車1よりわずかに短いことがわかります。「許容値」が0ならば車6は「なるべく前に配置される」という原則に従い車4の後ろに配置されます。車7は同じ原則に従って車1の後ろに配置されます。最終的に最初の水平方向のコンテンツの並びは「1・2・3・4」の順となり、次の水平方向のコンテンツの並びは「7・5・6」となります。

ただし、車1と車4の長さの差はほんのわずかであるため、車6がページの上部に近くなったといっても誤差の範囲内であるともいえます。ならば、車6が右にあって車7が左にある状況がむしろ混乱の元となりかねないかもしれません。「たった数cm前に出たいがために車線変更するのか？」という観点から考えれば、「許容度」というのは「車の運転手にどれだけ冷静に運転してほしいか」と言い換えられるかもしれません。これをウェブデザインに置き換えると、コンテンツをタブ操作で切り替えるユーザーは直感的な動作が行われず混乱するかもしれませんし、コンテンツの順序が何らかの形でラベル付けされている場合には想定外のエクスペリエンスとなる恐れもあります。

実際のところこのような些細なサイズの違いが問題になることはまずないので、車1と車4のようなアイテムのサイズは同じであると見なした方が都合がいいと言えます。「許容度」はこのための概念であり、デフォルト値1emのitem-toleranceとして定義されます。言い換えると、次のアイテムの位置を決定する際には1emを超えるコンテンツの長さの違いのみが考慮されることになります。アイテムの並び順をより整然とさせたいのであればitem-toleranceの値をより大きく設定します。以下の例ではitem-toleranceの値を車1の車長の半分にしているので、明らかに他車より長い車2以外は同程度の長さとして扱われ、2番目のコンテンツの並びは感覚的にもわかりやすい「5・6・7」となります。