グリッドレーンレイアウト

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

CSS グリッドレイアウト仕様書のレベル 3 では、グリッドレーンレイアウトを定義し提案す。これは display の値に grid-lanes や inline-grid-lanes を指定することによりアクセスできます。このガイドでは、グリッドレーンレイアウトがどのように動作するか、どのように使用するかについて説明します。

グリッドレーンレイアウトとは、一方の軸（多くの場合は列）が一般的な厳格なグリッドレイアウトを使用し、もう一方の軸が積み重ねアルゴリズムを使用する方法です。積み重ね軸においては、短いアイテムの後に隙間を残すような厳格なグリッドにこだわるのとは異なり、次の行のアイテムがその隙間を埋めるように上に積み上がっていきます。

グリッドレーンレイアウトの作成

最も一般的はグリッドレーンレイアウト（列がグリッド上に配置され、行がグリッドレーンレイアウトアルゴリズムを用いて詰め込まれるレイアウト）を作成するには、display: grid-lanes を grid-template-columns と組み合わせて使用します。

このコンテナーの子要素は、グリッドレーンレイアウトアルゴリズムに従って、積み重ね軸に沿ってアイテムごとに配置されます。それぞれのアイテムの各行は、最も余地の多い列に配置されるため、厳密な行トラックがない状態で、要素がぎっしりと詰め込まれたレイアウトになります。

* {
  box-sizing: border-box;
}

body {
  font: 1.2em sans-serif;
}

.grid {
  padding: 10px;
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.item {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}

css

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

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "3.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.blockSize = itemSizes[i];
}

同時に、アイテムが行ごとに読み込まれるグリッドレーンレイアウトを作成することもできます。

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "2.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.inlineSize = itemSizes[i];
}

css

.grid {
  display: grid-lanes;
  gap: 10px;
  grid-template-rows: repeat(3, 100px);
}

グリッド軸の制御

グリッド軸では、グリッドレイアウトで期待した通りに動作します。キーワード span を使えば、自動配置を維持したまま、アイテムを複数のトラックにまたがって配置することができます。また、線ベースの位置指定を使ってアイテムを配置することもできます。

またがったアイテムのあるグリッドレーンレイアウト

この例では、2 つのアイテムが 2 つのトラックにまたがっており、残りのアイテムはグリッドレーンレイアウトアルゴリズムによってそれらの周囲に配置されます。

html

<div class="grid">
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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

.span-2 {
  grid-column-end: span 2;
}

この例では、列の位置が決まっているアイテムが含まれています。配置が確定しているアイテムは、グリッドレーンレイアウトのアルゴリズムが実行される前に配置されます。

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item positioned">位置指定されています。</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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

.positioned {
  padding: 1em;
  grid-column: 2 / 4;
}

仕様書

仕様書
CSS Grid Layout Module Level 3 # valdef-display-grid-lanes
CSS Grid Layout Module Level 3 # valdef-display-inline-grid-lanes

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年8月20日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

グリッドレーンレイアウト

グリッドレーンレイアウトの作成

グリッド軸の制御

またがったアイテムのあるグリッドレーンレイアウト

仕様書

ブラウザーの互換性

css.properties.display.grid-lanes

css.properties.display.inline-grid-lanes

関連情報

MDN の改良に協力