CSSグリッドレイアウトモジュール レベル3

1. はじめに

このセクションは規範的ではありません。

グリッドレイアウトは、CSSのレイアウトモデルで、 ボックスやその内容のサイズや配置を強力に制御する機能を持っています。 グリッドレイアウトは2次元レイアウトに最適化されています。 つまり、両軸でコンテンツの整列が求められる場合です。

従来のグリッドレイアウトでは多くのレイアウトが表現できますが、項目を両軸のグリッドに制限すると、Webでよく使われるいくつかのレイアウトが表現できなくなります。

このモジュールでは、その制限を取り除き、項目を一方の軸ではグリッド状のトラックに配置し、もう一方の軸では順番に積み重ねられるようにしたグリッドレイアウトのバリエーションを定義します。 特定のトラックに明示的に配置されなかった項目は、これまでに配置された項目のレイアウトサイズにもとづいて、残りスペースが最も多い列（または行）に配置されます。

1.1. 背景と動機

1.1.1. アイテムの自動配置によるウォーターフォールレイアウト

グリッドレーンレイアウトは、 “メイソンリーレイアウト”または“ウォーターフォールレイアウト”とも呼ばれることがあり、 多数のアイテム（一般的には画像や記事の要約など）を 一つずつ列に配置していく、組積造に緩やかに似たWebデザインパターンの一つです。 マルチカラムレイアウトや複数行のカラムフレックスレイアウトのように、 内容がまず最初の列に縦方向に配置され必要に応じて2列め以降に溢れるのとは異なり、 自動配置されたグリッドレーンレイアウトでは、 各新しいアイテムごとにどの列に置くかが選ばれ、 それは通常より上部（後に置かれるアイテムより上）に近くなるように配置されます。

従来のPinterestの検索結果ページはこのレイアウトの好例です：

ここでは、各アイテムの高さは異なり （内容や列幅によって異なります）、 DOMを検証すると （ビジュアル上は並び順が明示されていませんが） 各アイテムが、その時点で最も高さの低い列に配置されていることが分かります。

このレイアウトは一見マルチカラムレイアウトと似ていますが、 縦方向にスクロールすることで自然に“後ろ”のアイテム （検索結果の中で重要度が低いものなど）が表示されていくという利点があります。

従来のCSSレイアウトモデルでは、 各アイテムの高さを事前に知っているか、 JavaScriptによる計測又は配置を利用しない限りこのレイアウトは実現できません。

display: grid-lanesとgrid-template-columnsを組み合わせることで この種のグリッドレーンレイアウトが実現できます。

1.1.2. 一次元のグリッドレイアウト

グリッドレイアウトは 二つの軸で強力なトラックサイズ指定や明示的配置が可能ですが、 レイアウトによっては一つの方向だけでアイテムの整列ができれば十分な場合もあります。

グリッドレーンレイアウトと 明示的配置アイテムの組み合わせによって この種の一次元グリッドレイアウトが実現できます。

Douglas Graham氏によるこの例は 各アイテムを明示的に割り当てた列に配置していますが、 行は存在しません。 その代わり、各列内のアイテムは順番に積み重なります。 このレイアウトはグリッドレイアウトでは 再現できません。 なぜなら隣接する列間でアイテムの“またぎ”関係が固定でなく、 相対的な高さやバナー・広告項目の有無で動的に決まるからです。 またフレックスレイアウトでも再現できません。 なぜなら （読みやすさ・シーケンスナビゲーションや１カラムのモバイル表示に使われる）ソース並び順が 二つの列の間を行き来することになるからです。

1.2. 値の定義

この仕様はCSS2のプロパティ定義規約および[CSS2]に従っており、 値定義構文には[CSS-VALUES-3]を用います。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの併用により、これら値型の定義が拡張されることがあります。

各プロパティの定義欄に挙げた値のほか、 この仕様で定義された全プロパティは CSS全域キーワードも受け付けます。 読みやすさのため、省略して明示していません。

2. グリッドレーンレイアウトモデル

グリッドレーンレイアウトは、 グリッドレイアウトに似た形で 一つの軸（グリッド軸と呼ぶ）に アイテムをあらかじめ定めたトラックに配置し、 他方の軸ではフレックスレイアウトと同様に 自由に流します（積層軸と呼ぶ）。 グリッドレイアウトと同様で、フレックスレイアウトとは異なり、 グリッドレーンレイアウトの自動配置は 各トラックの長さをできるだけそろえるようアイテムを分配します。

グリッドアイテムは ブロック化も 通常のグリッドコンテナと全く同様です。

CSSの各プロパティも、特記なき限り 通常のグリッドコンテナと同様に機能します。 たとえばorderプロパティで レイアウト順序を指定できます。

注記: サブグリッドアイテムもサポートされていますが、 サブグリッド化はグリッド軸のみで発生します。 詳しくは§ 3.2 サブグリッドを参照してください。

グリッドレーンコンテナは、 グリッドコンテナで その内容がグリッドレーンレイアウトに従って配置されます。 グリッドレーンコンテナは トラックを 積層軸がブロック軸の場合はカラムとして、 トラックを 積層軸がインライン軸の場合は行として作成します。

グリッドレーンコンテナの比較

列レーン	grid-template-columns: 1fr 2fr 3fr;
行レーン	grid-template-rows: 1fr 2fr 3fr;

2.1. 並べ替えとアクセシビリティ

グリッドレーンレイアウトは一般的には前方向に進行しますが （少なくとも一方の軸では次のアイテムが現在のアイテムの終端側に配置され、 自然な「読み順」に一致します）、 インライン軸やブロック軸のどちらの終端方向にも切り替わる場合があり、直感的でない順序になることもあります。 シンプルなケースでは、item-toleranceプロパティを使うことで、 自動配置アイテムのレイアウト時に積層軸でのわずかなサイズ差による逆戻り感を減らすことができます。 しかし、自動配置と明示的配置やスパンアイテムが混在すると、 ある程度の逆戻りが発生することがあります。

例えば、次のマークアップ例では、 4番目のアイテムはスパン指定があり、1行目の残りの空列に収まりません。 結果として最初の列、つまりそれが収まる最も高い空きスペースに配置されます。 その後のスパン1のアイテムはいずれも「上側」の空き列に配置され、 自然な読み順が崩れます。

<section class=masonry>
  <div class=item>1</div>
  <div class=item>2</div>
  <div class="item tall">3</div>
  <div class="item wide">4</div>
  <div class=item>5</div>
  <div class=item>6</div>
  <div class=item>7</div>
</section>
<style>
.masonry {
  display: grid-lanes;
  grid-template-columns: repeat(5, auto);
}
.item { height: 50px; }
.item.wide { grid-column: span 3; }
.item.tall { height: 90px; }
</style>

このように、特定トラックへ明示的に配置されたアイテムが後方に隙間を残すと、 そこに後から自動配置されたアイテムが視覚的な順序を乱して配置される場合があります。

著者はこうした可能性を認識し、逆戻りを最小限に抑えるレイアウト設計を心がけるべきです。 それにより、フォーカスや読み順の追従がしやすくなります。 あるいは、アイテムに固有の順番がない場合は、 reading-flowプロパティを使い、 UAに読み・線形ナビゲーション順序を再構成させることもできます。

ここでは自動配置アイテムの順序変更をデフォルト挙動にすべきか？

グリッドレイアウトやフレックスレイアウト と同様に、orderプロパティで アイテムの順序制御も可能です。 注意点も同様です。 詳しくは CSS Grid Layout 2 § 4 並べ替えとアクセシビリティや、 CSS Display 4 § 3.1 並べ替えとアクセシビリティを 参照してください。

2.2. グリッドレーンレイアウトの確立

grid-lanes

この値は要素をブロックレベルのグリッドレーンコンテナとして描画します。

inline-grid-lanes

この値は要素をインラインレベルの グリッドレーンコンテナとして描画します。

グリッドレーンコンテナが そのグリッド軸でサブグリッドでない場合は、内容に対して独立フォーマットコンテキストを確立します。

2.3. グリッドレーンのレイアウトの向き付け

グリッドレーンコンテナーの向き、すなわちそのグリッド軸が インライン軸（列を確立する） か ブロック軸（行を確立する） かは、未定プロパティによって決まります。

このプロパティの初期値は normal です。これは grid-template-*プロパティから向きを決定します：

• grid-template-columnsがnone かつgrid-template-rowsがnoneでない場合、 グリッドコンテナーのブロック軸 がグリッド軸 となり（行を確立）、

• それ以外（すなわちデフォルトでは）、 グリッドコンテナーのインライン軸 がグリッド軸 となります（列を確立）。

.container {
  display: grid-lanes;
  grid-template-columns: 100px 200px;
}

.container {
  display: grid-lanes;
  grid-template-rows: 100px 200px;
}

ここでgrid-auto-flowを再利用するのか （およびその値が何を意味するのか） あるいはgrid-lanes-directionのような新しいプロパティを定義するのか決めること。[Issue #12803]

3. グリッドレーントラック仕様

グリッド軸においては、 グリッドレイアウトの持つトラック指定の全機能が利用できます。

• トラックサイズ、ライン名、エリアはグリッドレーンコンテナーのグリッド軸上に グリッドレイアウトと同様に指定できます。

• 明示グリッドおよび暗黙グリッドは 通常のグリッドコンテナーと 同様の方法で形成されます。

• アイテムは これらのグリッドテンプレート上に グリッドレイアウトと同様に 配置できます。

ただし、 自動配置されたアイテムは、最終的に配置されるトラックだけでなく 全てのトラックのサイズ決定に寄与します。 § 3.4 グリッド軸トラックサイズ決定を参照してください。

注: これは、自動配置アイテムが 配置されると同時にレイアウトされる必要があり、 そのため各トラックがどれだけ「埋まっている」か（従って次の自動配置アイテムをどのトラックが受け取るべきか）が わかる必要があるためです。 よって、アイテムがレイアウト時に自身の利用可能な空間を把握できるよう、 トラックはすでに確定したサイズを持っていなければなりません。

3.1. グリッドレーントラックテンプレートの宣言：grid-template-*プロパティ

grid-template-* と grid-auto-rows/grid-auto-columns プロパティ （およびそれらのショートハンド）は、グリッドレーンコンテナー の グリッド軸 に適用され、 通常の グリッドコンテナー と同様にトラックを確立します。 （これらは スタッキング軸 では無視されます。）

3.1.1. 固有トラックとrepeat()

Level 3では、repeat()記法を拡張し、 最小トラックサイズ関数も最大トラックサイズ関数も確定値でない場合でも （つまり<auto-repeat>構文が以下のように緩和されます）：

<auto-repeat> = repeat(  [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )

繰り返し数を決定するために、 そうしたトラックの仮想サイズを算出します。 これは（CSS Grid Layout 2 § 12.4 トラックサイズ初期化）で初期化し、 （CSS Grid Layout 2 § 12.5 固有トラックサイズの解決）で固有サイズを解決します。 § 3.4 グリッド軸のトラックサイズ規定に従い、 次の仮定のもとで行います：

• 明示的なアイテム配置は無視する （全アイテムが自動位置を持つと仮定する）。

• トラックの折りたたみは行わない。

• すべての自動配置の可能性を表現できるように トラックリストを拡張する。 すなわち 2 + (最大スパン - 2)/(repeat()中のトラック数)回 （小数点以下切り捨て）だけ トラックリストを繰り返す。

repeat()リストの各トラックの仮想サイズは、 そのインデックスごとに最大となるトラック値が採用されます。

これはグリッドレイアウトでも動作すべきか、それとも単一繰り返しにフォールバックすべきか？　その場合どうする？　[Issue #10915]

注記: この単純化したレイアウトヒューリスティクスは 「十分よい」かつ高速・一貫性のある定義を目的としています。 配置指定を無視しないとこの仕組みの整合性が保てません。 必要な繰り返し回数がわかる前に、 どのトラックにアイテムが入るか （たとえ明示的配置でも） 確定できないためです。

明示的配置が繰り返し範囲にかからない場合は 先に位置を確定できるため、上記アルゴリズムを調整すべき？ つまり、auto repeat(auto-fill, ...) autoの例で、 1番目や-1番目に明示的配置した場合は そのトラックだけに影響を限定できそう（すべてのトラックに影響するものと仮定しなくてよい？）。

3.2. サブグリッド

サブグリッドは、入れ子のグリッドレーンコンテナー（およびグリッドコンテナー） がトラックサイズを共有できるようにします。 親の対応する軸がグリッド軸の場合、 サブグリッド化された軸は親コンテナーから グリッドコンテナー用に定義された通りに引き継がれます。 親の対応する軸がスタッキング軸の場合は、 サブグリッド化された軸もスタッキング軸として機能します。

レーンの向きと衝突する場合や両軸が積層になる場合は？

グリッドレーンレイアウトでは、 自動配置されたサブグリッドは 親グリッドからライン名を継承しません。 これはアイテムの配置がレイアウト結果に依存してしまうためです。 ただしサブグリッドのトラックは通常どおり親トラックと整列します。

こちらはサブグリッドの例です：

<style>
.grid {
  display: inline-grid-lanes;
  grid-template-rows: auto auto 100px;
  align-content: center;
  height: 300px;
  border: 1px solid;
}

.grid > * {
  margin: 5px;
  background: silver;
}
.grid > :nth-child(2n) {
  background: pink;
}

.grid subgrid {
  display: grid;
  grid: subgrid / subgrid;
  grid-row: 2 / span 2;
  grid-gap: 30px;
}
.grid subgrid > * { background: cyan; }
</style>

<div class="grid">
  <item>1</item>
  <item>2</item>
  <item>3</item>
  <subgrid>
    <item style="height:100px">subgrid.1</item>
    <item>sub.2</item>
    <item>s.3</item>
  </subgrid>
  <item>4</item>
  <item>5</item>
  <item style="width: 80px">6</item>
  <item>7</item>
</div>

サブグリッドの最初のアイテム（「subgrid.1」）が親グリッドの2行目の本来のサイズに寄与していることに注目してください。 これは、サブグリッドが明確な位置を指定したため、どのトラックに配置されるか分かるので可能です。 また、親のスタッキング軸をサブグリッド化しようとすると、 サブグリッドがグリッドレーンコンテナーに変換され、 そのインライン軸がスタッキング軸となることにも注目してください。

サブグリッド でありグリッドレーンコンテナーでもあるものは、 グリッドレーン・サブグリッド と呼ぶことができます。

3.3. トラック反復：repeat()記法

この仕様ではrepeat()記法向けの新キーワードや grid-lanes専用挙動を導入します。

3.3.1. repeat(auto-fit)

グリッドレーンコンテナー（通常のグリッドコンテナーと同様に）では、 auto-fitはauto-fillのように動作しますが、 空トラックは折りたたまれます。 ただし、配置はトラックサイズ決定の後に行われるため、 グリッドレーンコンテナーは トラックが占有されるかどうかを判定するためにヒューリスティックを用います。

• 明示配置されたアイテムが存在するトラックはすべて埋まっているとみなす。

• 自動配置アイテムのスパン合計をNとしたとき、 未使用トラックのうちN番目までを埋まっているとみなす。

このヒューリスティクスで埋まっていないと判定された auto-fit繰り返しの全トラックは “空”とみなされ折りたたまれます。 折りたたまれたグリッドトラックには 自動配置アイテムを配置できません。

注記: auto-fill利用時にアイテムが置けるトラックでも、 auto-fitだと 折りたたみが発生することがあります。 これはスパン＞1の自動配置アイテムと明示配置が混在し、 自動配置アイテムが入るには小さすぎる隙間が生まれる場合です。

3.4. グリッド軸のトラックサイズ指定

トラックサイズ方法はCSS Grid同様ですが、 固有サイズ寄与を考慮する場合：

• そのトラックに明示配置されたアイテムはすべて寄与し、

• 自動グリッド位置のアイテムも （最終配置先を問わず）全部寄与する。

スパン付き自動グリッド位置アイテムについては、 あらゆる開始位置に配置されると想定し、その分だけ寄与します。

注: このアルゴリズムは、各トラックが最終的に配置されるすべてのアイテムを収容できる十分な大きさになることを保証し、かつ配置とトラックサイズ決定の間に依存サイクルが生じないようにします。ただし、サイズのばらつきによっては、トラックが必要以上に大きくなる場合があります。厳密なフィットが保証されるのは、すべてのアイテムがグリッド軸上に明示的に配置されている場合、またはすべてのアイテムのサイズが同じ場合（またはスパンアイテムの場合はそのサイズの整数倍が一致している場合）のみです。

3.4.1. サブグリッドアイテムの寄与

通常のグリッドコンテナー またはグリッドレーンコンテナーのトラックサイズを決定する際、 グリッドレーン・サブグリッドは自動グリッド位置を持つアイテムについて特別な扱いを行います。

• 該当アイテムはサブグリッドによってまたがるあらゆるトラックに 配置されるものとみなす。 （サブグリッドが明示グリッド位置を持つなら そのトラックだけ、自動グリッド位置なら親グリッド全トラック。）

• 該当アイテムは 配置されうる各端辺で最大のmargin/border/padding寄与を受ける。 サブグリッド全体をまたいでいれば両端寄与も受ける。 （CSS Grid Layout §9参照）

3.4.2. トラックサイズの最適化

下記のように同じスパン・配置を持つアイテムは 1つの仮想アイテムにまとめてトラックサイズ最適化できます：

1. グリッドアイテム全体を、 次の属性でアイテムグループ分けする：

   • アイテムのスパン

   • アイテムの配置（どのトラックに入るか）

   • アイテムのベースライン共有グループ

   注記: 例えばスパン2で2列目に配置したアイテムと スパン2で自動位置のアイテムは異なるグループです。

2. 各アイテムグループごとに グループ内アイテムの固有サイズ寄与の最大値を持つ 仮想グリッドアイテムを合成する。

   ベースライン共有がある場合は、全アイテムを仮想グリッドトラックに配置して 共有ベースラインとshimを求め、 グループの固有サイズ寄与を拡張する。

3. 仮想的な仮想グリッドアイテムのコピーを、それぞれが占める可能性のあるすべてのグリッド軸トラックに配置し、 それらのアイテムでトラックサイズ決定アルゴリズムを実行します。 得られたトラックサイズがグリッドレーンコンテナーのトラックサイズとなります。

注記: この最適化は前述の トラックサイズ規定と同じ結果となるべきです。 そうでなければ仕様バグです。CSSWGに報告してください。

4. グリッドレーンのアイテム配置

グリッド軸においては、 アイテムを明示的にトラックに配置したり、それらをまたいで配置したりすることが、 よく知られたgrid-placementプロパティの構文で可能です。 一方、自動配置は§ 4.4 グリッドレーンのレイアウトおよび配置アルゴリズムを用いて、 自動グリッド位置を持つ各アイテムを利用可能な「最も短い」トラックに配置します。

以下は、明示配置とスパン指定があるアイテムを使ったグリッドレーンレイアウト例です：

.container {
  grid-template-columns: repeat(3, auto);
}
.container > :nth-child(2) {
  /* 自動配置だがスパン指定有り */
  grid-column: span 2;
}
.container > :nth-child(3) {
  /* 手動配置 */
  grid-column: 3;
}
/* その他の子要素は自動配置 */

4.1. グリッド軸アイテムの配置指定：grid-column-*・grid-row-*プロパティ

grid-column-*とgrid-row-*プロパティ （およびそのショートハンド）は アイテムのグリッド軸に適用され、 通常のグリッドレイアウトと同様に配置を決定します。

4.2. 配置の許容範囲：item-tolerance プロパティ

グリッドレーンコンテナー は 各グリッドアイテムを 現在最も空いているグリッドトラックに配置して埋めていきます。 複数のトラックが最も空いている状態で並ぶ場合、 アイテムを順番に配置すると見た目が良くなります。 しかしトラックの高さがごくわずかに異なるだけの場合は、 高さの違いが意味あるほどには認識できず順に配置されないと 違和感のある見た目になります。

item-toleranceプロパティは 「同じ高さ」とみなすためのしきい値を指定し、 それによりトラックが順に埋まるようにします。

<length-percentage>

グリッドレーンコンテナーの同点しきい値を指定します。 配置位置が最短位置から指定距離以内であれば、 それらは同じくらい良い（「同点」）とみなされます。

注: 初期値は「小さい」距離 （1em） であり、“ほとんど同じ”とみなすには適切だと思われます。

normal

使用値として グリッドレーンレイアウトでは1em、 他のレイアウトモードでは0となります。

infinite

無限大の同点しきい値を指定します。 この値により、トラックの長さを一切考慮せず、 アイテムは厳密に順番通りに配置されます。

注: この値では 連続するアイテムがスタッキング軸の中で 大きく異なる位置に配置される可能性があり、閲覧者が混乱する場合があります。 初期値（`1em`）が小さすぎると感じたら、`infinite`ではなく 10emや50vhなど、より大きな値を設定することを検討してください。

次の例では、 5番目のアイテムを配置する際、 4番目のカラムが最も短いですが、 1番目のカラムもほぼ同じ高さです。

デフォルトの許容値1emだと 1番目と4番目のカラムは「同点」とみなされ、 そのため1番目が選ばれます。

代わりに許容値を0pxに設定した場合は 同点は発生せず、 4番目のカラムのみが配置先となります。

CSSWGはこのプロパティのより良い名前を歓迎しています。[Issue #10884]

注: 将来的にはこのプロパティをフレックスレイアウトにも適用する予定です。 その適用方法についての議論もご覧ください。

4.3. 密配置：denseキーワード

グリッドレイアウトにおいて、grid-auto-flow: denseは グリッドアイテム配置アルゴリズム中に バックトラッキングを許可します。 同様にdenseキーワードは グリッドレーン配置アルゴリズム中に バックトラッキングを許可します。 ただし、グリッドレーンレイアウトでは アイテムの配置とサイズ決定が不可分なため、 アイテムは、そのスロットのトラック総使用サイズが 通常配置されるトラックの使用サイズと一致する場合にのみ、 互換性のある空きスロットへバックトラックできます。

注: この制約により、アイテムを複数回レイアウトすることを回避します。

4.4. グリッドレーンのレイアウト・配置アルゴリズム

グリッド軸の各トラックごとに、 ゼロで初期化された連続位置を保持します。 また、自動配置カーソルも管理し、 初期状態では最初のラインを指します。

各アイテムについて、順序修正済みドキュメント順序で処理します：

1. アイテムが明示的なグリッド位置をグリッド軸上に持つ場合、 その配置を使います。

   これもカーソルを更新すべき？

   そうでない場合は、以下のサブステップでグリッド軸配置を解決します：

   1. グリッド軸の暗黙グリッド内の最初のラインから開始し、 もしこの位置に配置した場合そのアイテムがまたぐグリッド軸トラックの 連続位置の最大値を計算し、 これを max_pos と呼びます。
   2. アイテムがグリッド内に収まらなくなるまで、各連続するライン番号で上記手順を繰り返します。
   3. 最小の max_pos を得たラインと、その max_pos から同点しきい値以内の すべてのラインを possible lines とします。
   4. possible linesの中から自動配置カーソル以上の最初のラインを アイテムのグリッド軸上の位置とします。 なければ最初のものを選びます。
   5. 自動配置カーソルを アイテムの最終ラインを指すよう更新します。
2. アイテムを、そのまたぐトラックの連続位置の最大値の位置に グリッド軸トラック上で配置します。
3. アイテムの包含ブロックサイズを算出し、アイテムをレイアウトします。 また、またいだグリッド軸トラックの連続位置を max_pos + 外側サイズ + grid-gap に設定します。

   このとき、ボックスの外側サイズは0未満にはなりません。

   注: ボックスの負のマージンが十分大きい場合でも、 ここで負のサイズとしてカウントされることはありません。 トラックの連続位置は決して減少せず、 負のサイズのボックスが 将来このトラックに通常サイズのアイテムを配置すると 以前のアイテムと重なることにはなりません。

4. グリッドレーンコンテナーが denseパッキングを使用していて、 レイアウト内にスパンで空きができた（また伸びたアイテムなどで）箇所があり、 現在のサイズのままアイテムをそこに早く置いていれば入ったはずで、 そのときまたいだトラックの総使用サイズが 今いるトラックの使用サイズと同じ場合は、 そのうち最も上（高い）の空きに配置します。 同点しきい値以内に複数有効な空きがある場合は、 そのうち開始端に最も近い箇所に配置します。 このとき自動配置カーソルや連続位置は、 このアイテムの配置前の値に巻き戻します。

   注: 実際に視覚的に空きに食い込むボックス （負マージンやposition: relative、transform等）は その空間のサイズには影響しません。 後のアイテムがそこに配置されて、 視覚的には重ねてしまう場合があります。

   注: denseパッキングでは埋め戻し時に 自動配置カーソルを無視し、 配置後も更新しません。 埋め戻す空きが存在しない場合は、 dense指定なし時と まったく同じ動作をします。

注: このアルゴリズムはアイテムができるだけ高く 配置されることになるトラックを選びます。 同点があれば、一番早いそのトラックで、 可能なら直前に配置したアイテムより後ろの位置（必ず前進）を選びます。

4.4.1. 包含ブロック

グリッドアイテムがグリッドレーンレイアウトに参加する場合の包含ブロックは、グリッド軸におけるそのグリッド領域と、スタッキング軸におけるグリッドコンテナーの内容領域によって構成されます。

4.4.2. 配置と書字モード

注: グリッドレイアウト全体と同様に、 グリッドレーンのレイアウトと配置も書字モードに敏感です。 たとえば、direction: rtlの場合、 インライン軸がグリッド軸でもスタッキング軸でも、 アイテムは右から左へ配置されます。

ここでは例として、direction: rtlをグリッド軸で使っています:

<style>
  .grid {
    display: inline-grid-lanes;
    direction: rtl;
    grid-template-columns: repeat(4, 2ch);
    border: 1px solid;
  }

  item { background: silver }
  item:nth-child(2n+1) {
    background: pink;
    height: 4em;
  }
  </style>

<div class="grid">
  <item>1</item>
  <item style="grid-column:span 2">2</item>
  <item>3</item>
  <item>4</item>
</div>

こちらは例で、 direction: rtlを積層軸で用いています：

<style>
.grid {
  display: inline-grid-lanes;
  direction: rtl;
  width: 10ch;
  column-gap: 1ch;
  grid-template-rows: repeat(4, 2em);
  border: 1px solid;
}

item { background: silver }
item:nth-child(2n+1) {
  background: pink;
  width: 4ch;
}
</style>

<div class="grid">
  <item>1</item>
  <item style="grid-row:span 2">2</item>
  <item>3</item>
  <item>4</item>
</div>

5. グリッドコンテナのサイズ指定

グリッドコンテナーのサイズ指定は通常のグリッドコンテナーと同様に動作しますが、スタッキング軸については次のように置き換えます。 グリッドコンテナーのスタッキング軸におけるmax-contentサイズ（min-contentサイズ）は、 その軸でグリッドレーンコンテナーがmax-content制約（min-content制約）下でサイズ指定された時のスタッキング範囲の大きさです。 スタッキング範囲は、各トラックの最初のアイテム群の中で最も開始端側の外側端から、各トラックの最後のアイテム群の中で最も終了端側の外側端までの範囲です。

次はシンプルな例です：

<style>
.grid {
  display: inline-grid-lanes;
  grid-template-columns: 50px 100px auto;
  grid-gap: 10px;
  border: 1px solid;
}
item { background: silver; margin: 5px; }
</style>

<div class="grid">
  <item style="border:10px solid">1</item>
  <item>2</item>
  <item>3</item>
  <item style="height:50px">4</item>
  <item>5</item>
  <item>6</item>
</div>

6. 整列とスペース

6.1. ガター： row-gap、 column-gap、およびgapプロパティ

ガターは両軸で row-gapや column-gapプロパティ（およびgap略記）でサポートされます。 グリッド軸においては、通常のグリッドコンテナーと同じ働きをします。 CSS Grid Layout 2 §  11. 整列とスペースを参照してください。 スタッキング軸では、 隣接アイテム間のマージンボックスの間にgapが適用されます。 どちらの軸でもマージンは折りたたまれません。

6.2. グリッド軸の整列： align-content/justify-content、align-self/justify-self、およびalign-items/justify-itemsプロパティ

グリッド軸では、 ボックス整列プロパティ は通常のグリッドコンテナーと同じように働きます。 CSS Grid Layout 2 §  11. 整列とスペースやCSS Box Alignment Level 3を参照してください。

6.3. スタッキング軸の内容分布： align-content/justify-contentプロパティ

スタッキング軸においては、 content-distributionが 全体としての内容に適用され、ブロックコンテナ内での挙動と同様です。 より具体的には、整列対象がスタッキング範囲となります。

注: これらのプロパティの整列対象は スタッキング軸につき一つだけ存在します。 したがって、ユニークなalign-content / justify-content値は start、 center、 end、 ベースライン整列 になります。 （normal や stretch の挙動はstartと同じです。 分散整列値はフォールバック整列の挙動になります。） グリッドアイテムが グリッドコンテナーの内容領域に対して スタッキング軸方向に溢れる場合は、 スタッキング範囲が グリッドコンテナーの内容領域よりも大きくなります。

6.4. スタッキング軸の自己整列： align-self/justify-self および align-items/justify-itemsプロパティ

スタッキング軸においては、 自己整列プロパティは レイアウト内でギャップに隣接するアイテム、すなわち グリッドトラックの直前がスパンアイテム、または最後のアイテムのいずれかに配置されたものにのみ適用されます。 整列対象は アイテムのマージンボックスであり、 整列コンテナーはそのボックスと隣接するギャップを含みます。

この自己整列プロパティのスタッキング軸での動作定義は妥当でしょうか？ [Issue #10275]

6.5. ベースライン整列

アイテムのベースライン整列はグリッド軸トラック内では 通常のグリッドコンテナーと同様に機能し、 グリッドコンテナーのベースラインも その軸での通常のグリッドコンテナーと同様に決定されます。

ベースライン整列はスタッキング軸ではサポートされていません。 この軸でのグリッドコンテナーの 最初のベースライン集合は、各トラックで最初に配置された整列ベースラインの中で最も高いものから生成され、 最後のベースライン集合は、各トラックの最後に配置された整列ベースラインの中で最も低いものから生成されます。

最初の行でベースライン整列をサポートすることもできます。そうすべきでしょうか？

7. フラグメンテーション

7.1. スタッキング軸でのフラグメンテーション

グリッド軸の各トラックは スタッキング軸で独立して分割されます。 グリッドアイテムが分割されたり、 直前・直後に強制改ページがあった場合、 そのアイテムがまたぐグリッド軸トラックの 連続位置は フラグメンテナの大きさに設定され、 以降そのトラックにはアイテムが配置されなくなります。 アイテムが複数のフラグメントに分割された場合でも グリッド軸上での配置位置は全フラグメントで保持されます。 ただしグリッドアイテムが押し出された場合は、 次のグリッドコンテナーフラグメントで再度配置されます。 全てのアイテムが配置されるか新しいフラグメントに押し出されるまで配置処理は続きます。

7.2. グリッド軸でのフラグメンテーション

グリッド軸の グリッドレーンコンテナーにおいても フラグメンテーションがサポートされています。 この場合の分割動作は通常のグリッドコンテナーとよく似ていますが、 分割前に各アイテムがどのグリッド軸トラックへ配置されるかを決定するステップがあります。

8. 絶対位置指定

グリッドに沿った絶対配置の子孫は グリッドレーンコンテナーでも通常のグリッドコンテナー同様にサポートされます。 ただし、スタッキング軸には配置用のラインは（autoラインの他に）2本しか存在しません：

• line 1（line -2）はスタッキング範囲の開始端に対応します

• line 2（line -1）はスタッキング範囲の終了端に対応します

スタッキング軸における静的位置を定義してもよいかもしれません。 それはその時点のグリッド軸トラックの連続位置のmax（またはmin？）か、直前アイテムの末端でもよい？

9. グレースフルデグラデーション

一般的には、グリッドレーンの設計は グリッドレイアウトには対応するがグリッドレーンレイアウトに非対応なUAでもかなりうまく縮退すると期待できます。

display: grid;
display: grid-lanes; /* grid lanes layout 非対応UAでは無視される */
grid-template-columns: 150px 100px 50px;

付録A: 一般的なレイアウトアイテムフロー制御: item-*プロパティ

この節は別の仕様（ [css-display-4] など）に移動する可能性があります。 これは複数のdisplay型に影響するためです。 またこの設計が妥当かも議論中です。

CSSの複数のレイアウトモードでは、 子要素を行や列で原子的な「アイテム」としてコンテナに並べ、 その順序や配置を制御できるようになっています。 item-*プロパティはこれらの順序・配置を汎用的に制御できる仕組みであり、 レイアウト固有のflex-flowやgrid-auto-flowを内包します。

これらのプロパティ名や構造はまだ検討中です。[Issue #11480]

アイテムフロー軸: item-track/item-direction

このプロパティはアイテムを行または列に配置するか、およびその中でstart-to-endかend-to-startかを制御します。

このプロパティには未決論点が2つあります: a) 名前と b) 配置の主軸方向を指すのか・アイテムを入れるトラックの向きなのか つまりこのプロパティで定義される主軸が 配置主軸なのかトラック主軸なのか （フレックスレイアウトやグリッドレイアウトでは一致し、 グリッドレーンレイアウトでは 配置方向がトラックの横断方向になる点だけ異なります）。 最新の議論参照。[Issue #11480]

auto

レイアウトモードによってrowまたはcolumnに算出されます：

• フレックスコンテナーとグリッドコンテナーでは rowになります。

• グリッドレーンコンテナーでは grid-template-rowsがnoneでなく grid-template-columnsがnoneのときは行トラックを指す値、 それ以外は列トラックを指す値になります。

row

トラック指向オプション 行（すなわちインライン軸と並行なトラック）に配置。 アイテムはstart-to-end順でその行に詰められます。

フロー指向オプション 行主軸のアイテム配置（すなわちインライン軸上に start-to-endで配置）。 フレックスレイアウトではflex row linesを、 グリッドレーンレイアウトではカラムグリッドトラックを生成します。

column

トラック指向オプション 列（ブロック軸と並行なトラック）に配置。 アイテムはstart-to-end順でその列を詰めます。

フロー指向オプション 列主軸のアイテム配置（ブロック軸上に start-to-endで配置）。 フレックスレイアウトではflex column linesを、 グリッドレーンレイアウトでは行グリッドトラックを生成します。

row-reverse

rowと同じですが、end-to-startで詰めます。

column-reverse

columnと同じですが、end-to-startで詰めます。

アイテム交差軸配置モード：item-cross/item-wrap

主軸の逆方向の配置を制御します。

auto

nowrapはフレックスコンテナーで、 他はwrapに算出されます。

nowrap

アイテムは常に配置主軸上に並び続けます（スペース切れでも）。 フレックスレイアウトでは単一行フレックスコンテナー、 グリッドレイアウトでは必要に応じ暗黙トラックを 配置主軸に作成します。

wrap

配置主軸でスペース切れになった時にアイテムが折り返します。 フレックスレイアウトでは複数行フレックスコンテナを作り、 グリッドレイアウトでは配置アルゴリズムが配置主軸上で明示トラックが尽きると 次の行もしくは列へ進みます。

normal

トラック主軸の逆方向にstart-to-end順で配置します。

フレックスレイアウト・グリッドレイアウトでは 新しいトラック（flex lineやグリッドトラック）の追加方向を制御します。

グリッドレーンレイアウトでは、 トラック指向記法の時は高さ同点ならどのトラックを選ぶか、 フロー指向記法の時はそのトラックの中でどの方向に詰めるか を制御します。

reverse

トラック主軸の逆方向にend-to-start順で配置します。

wrap-reverse

wrap reverseに算出します。

注: この値は既存のflex-wrap値と整合性を持たせるため存在します。

このプロパティの意味や名称は item-direction/ item-trackにおける軸の定義に依存します。[Issue #11480]

アイテム詰め込みモード：item-packプロパティ

このプロパティはアイテムを各トラック間でどう分布させるかをレイアウト固有に制御します。

normal

レイアウトモードのデフォルトのパッキング戦略を使います。

dense

先の空きを辿ってアイテムを戻し配置する（backtracking）ことを許します。 （先頭のアイテムがその空きには大きすぎたいわゆるskippingにより、空きができている場合があります。）

例えばフレックスレイアウトでは 前の行に空きがあればそこにアイテムを戻して配置できます。

balance

フレックスレイアウトでは 各行（最終行も含め）の内容量をバランスよくします（ text-wrap-style: balanceのような動作）。

アイテム配置ショートハンド：item-flow略記プロパティ

ショートハンドプロパティで 全てのitem-*個別プロパティ を1宣言でまとめて設定できます。

10. 謝辞

Cameron McCormack氏（メイソンリーレイアウト解説文書執筆、背景章より引用）、CSSWGへのプレゼンテーション、 Mats Palmgren氏（本仕様の最初のバージョン開発）に感謝します。 また、この機能の初期提案へのフィードバックをくださった皆様にも感謝します。

11. セキュリティに関する考慮事項

本仕様はレイアウト仕様であり、 CSSレイアウトが一般的にもたらすもの以外に新たなセキュリティ考慮事項はありません。

12. プライバシーに関する考慮事項

本仕様はレイアウト仕様であり、 CSSレイアウトが一般的にもたらすもの以外に新たなプライバシー考慮事項はありません。

変更点

レベル2以降の追加点

以下の機能が レベル2以降で追加されています：

• グリッドレーンレイアウトを追加。
• repeat(auto-fill) および repeat(auto-fit) が無限のトラックサイズ関数を受け付けるよう拡張。 (Issue 9321, Issue 12899)
• item-flowプロパティおよびそのロングハンドを追加。 これは項目の順序・配置のための汎用制御となります。 詳細は 付録A：汎用レイアウト項目フロー制御：item-*プロパティを参照。 (Issue 11480)

最近の変更

2025年9月17日作業草案以降の主な変更点：

• 新たな内部表示型grid-lanesを定義し、 グリッドレーンレイアウトを確立。 また、仕様用語もこれに合わせて更新。 (Issue 12022)

• 不要なauto-areas値をrepeat()から削除。 (Issue 10854)

• 無限のトラックサイズ関数でのrepeat(auto-fill)およびrepeat(auto-fit)のヒューリスティクスを調整。 (Issue 12899)

• アイテムのトラックへの実行位置への寄与をゼロで切り捨てる規定を追加。 (Issue 12918)

さらに過去の変更点は earlier changes も参照してください。