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

このグリッドレイアウトモジュールとフレキシブルボックスレイアウトモジュールとの間に不整合がある場合は、CSSWGに報告してください。これは誤りである可能性が高いです。

1. はじめに

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

グリッドレイアウトは、CSSにおける新しいレイアウトモデルであり、ボックスとその内容のサイズや配置を強力に制御する能力を持っています。フレキシブルボックスレイアウトが単一軸指向であるのに対し、グリッドレイアウトは2次元のレイアウト、すなわち内容の両方向での整列が求められる場面に最適化されています。

フレックスレイアウトの例：
2行のアイテム、
1行目は3つのアイテムがそれぞれスペースの1/3ずつ、
2行目は5つのアイテムがそれぞれスペースの1/5ずつ。
そのため「行」方向の整列はあるが、「列」方向の整列はない。 — 代表的なフレックスレイアウト例

グリッドレイアウトの例：
2行のアイテム、
1行目は4つのアイテム—そのうち最後の1つが両方の行にまたがる、
2行目は2つのアイテム—そのうち最初の1つが最初の2列にまたがる—さらに1行目からまたがったアイテムを含む。 — 代表的なグリッドレイアウト例

さらに、グリッド内でアイテムを明示的に配置できる能力により、グリッドレイアウトは対応するマークアップの変更を必要とせず、視覚的なレイアウト構造を劇的に変化させることが可能です。メディアクエリと、グリッドコンテナおよびその子のレイアウトを制御するCSSプロパティを組み合わせることで、著者はデバイスのフォームファクター、向き、利用可能なスペースの変化に応じてレイアウトを調整しつつ、プレゼンテーション間でより理想的な意味構造を維持できます。

多くのレイアウトはグリッドでもフレックスボックスでも表現できますが、それぞれ得意分野があります。グリッドは2次元の整列を強制し、レイアウトにトップダウンアプローチを採用し、アイテムの明示的な重なりを許可し、より強力なスパン機能を持っています。フレックスボックスは軸内のスペース配分に重点を置き、より簡単なボトムアップアプローチを用い、セカンダリ軸の制御にコンテンツサイズベースの折り返しシステムを利用でき、複雑なレイアウト構築にはマークアップ階層を利用します。両者はCSS著者にとって有用かつ補完的なツールとして期待されています。

1.1. 背景と動機

画像：水平・垂直整列が必要なアプリケーションレイアウト例。 — 水平・垂直整列が必要なアプリケーションレイアウト例

ウェブサイトが単純な文書から複雑なインタラクティブアプリへと進化する中で、浮動要素などの文書レイアウト技術はアプリケーションレイアウトには必ずしも適していませんでした。テーブルやJavaScript、浮動要素への慎重な寸法指定の組み合わせを用いることで、著者は目的のレイアウトを実現するための回避策を見つけました。利用可能なスペースに応じて変化するレイアウトは多くの場合脆弱で、スペースが制限されると直感に反する挙動となることもありました。代替案として、多くのウェブアプリケーションの著者は、画面上の利用可能なレンダリングスペースの変化を活用できない固定レイアウトを選択しました。

グリッドレイアウトの機能はこれらの問題を解決します。著者は予測可能なサイズ指定の挙動を利用して、レイアウト用の利用可能なスペースを列と行へ分割できます。その交点で定義されたグリッド領域に、アプリケーションの構成要素を正確に配置・サイズ指定できます。以下の例は、グリッドレイアウトの適応能力と、内容とスタイルのクリーンな分離の方法を示します。

1.1.1. 利用可能なスペースへのレイアウト適応

ゲームのレイアウトを2列3行で考える：左上にゲームタイトル、その下にメニュー、一番下にスコア、右側の上と中央にゲーム盤、右下にコントロール。左列はタイトル・メニュー・スコアの内容に合わせてサイズ指定され、右列は残りのスペースを埋める。 — 内容サイズと利用可能なスペースに従って配置された5つのグリッドアイテム

より広い画面では、中央行・右列がそのスペースを埋めるように拡張される。 — 利用可能なスペース増加によるグリッドの拡張

グリッドレイアウトはページ内の要素を賢くリサイズするために利用できます。隣接する図は、ゲームのレイアウトにおける5つの主要コンポーネントを示しています：ゲームタイトル、ステータス領域、ゲーム盤、スコア領域、コントロール領域です。著者の意図は、ゲームのためのスペース分割を以下のようにすることです：

ステータス領域は常にゲームタイトルの直下に表示される。
ゲーム盤はタイトル・ステータスの右側に表示される。
ゲームタイトルとゲーム盤の上端が常に揃う。
ゲームの最小高さ時は、ゲーム盤の下端とステータス領域の下端が揃う。それ以外の場合、ゲーム盤は利用可能なスペースを最大限に伸ばして利用する。
コントロールはゲーム盤の下に中央配置される。
スコア領域の上端はコントロール領域の上端に揃う。
スコア領域はステータス領域の下に配置される。
スコア領域はステータス領域の下のコントロール領域に揃う。

以下のグリッドレイアウト例は、著者がすべてのサイズ指定、配置、整列ルールを宣言的に達成する方法を示しています。

/**
 * 各グリッドアイテムのスペースを、
 * グリッドコンテナにグリッドを宣言して定義する。
 */
#grid {
  /**
   * 2列：
   *  1. 最初はコンテンツサイズ、
   *  2. 残りのスペースを受け取る（ただし最低限ボードやゲームコントロールのサイズは確保 [図4]）
   *
   * 3行：
   *  3. 最初はコンテンツサイズ、
   *  4. 中央行は残りのスペース（ただし最低限ボードやステータス領域の高さは確保）、
   *  5. 最後はコンテンツサイズ。
   */
  display: grid;
  grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
  grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* 各グリッドアイテムの位置を、
 * 'grid-row'や'grid-column'プロパティの座標で指定する。
 */
#title    { grid-column: 1; grid-row: 1; }
#score    { grid-column: 1; grid-row: 3; }
#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#board    { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

<div id="grid">
  <div id="title">ゲームタイトル</div>
  <div id="score">スコア</div>
  <div id="stats">ステータス</div>
  <div id="board">ボード</div>
  <div id="controls">コントロール</div>
</div>

注：グリッドの構造やグリッドアイテムの配置・サイズ指定には様々な方法があり、用途に応じて最適化されています。

1.1.2. ソース順序からの独立性

前述の例の続きとして、著者はゲームが様々なデバイスに適応することも望んでいます。また、ゲームは縦向き・横向きのいずれでもコンポーネントの配置を最適化できるべきです（図6・図7参照）。グリッドレイアウトとメディアクエリを組み合わせることで、著者は同じ意味的マークアップを使いつつ、ソース順序に依存せず要素のレイアウトを再配置し、両方の向きで目的のレイアウトを実現できます。

以下の例では、グリッドレイアウトの「グリッドアイテムが占有するスペースに名前を付ける」機能を利用しています。これにより、グリッド定義が変更されてもグリッドアイテムのルールを書き直す必要がありません。

@media (orientation: portrait) {
  #grid {
    display: grid;

    /* 行・列・領域はgrid-template-areasプロパティで視覚的に定義する。
         * 文字列が行、単語が領域。単語数で列数が決まり、各文字列の単語数は同一でなければならない。*/
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";

    /* 列・行のサイズ指定はgrid-template-columnsとgrid-template-rowsプロパティで割り当てる。*/
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
}

@media (orientation: landscape) {
  #grid {
    display: grid;

    /* 同じ名前の領域をtemplateプロパティで定義するが、今度はランドスケープ向けに異なる配置にする。*/
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

/* grid-areaプロパティでグリッドアイテムを名前付き領域に配置する。*/
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

<div id="grid">
  <div id="title">ゲームタイトル</div>
  <div id="score">スコア</div>
  <div id="stats">ステータス</div>
  <div id="board">ボード</div>
  <div id="controls">コントロール</div>
</div>

注：グリッドレイアウトの並べ替え機能は、意図的に視覚的なレンダリングのみに影響し、音声順序やソース順序によるナビゲーションには影響しません。これにより、著者は視覚的な提示を操作しつつ、CSS非対応UAや音声・逐次ナビゲーションなど線形モデル向けにソース順序を保つことができます。

グリッドアイテムの配置や並べ替えを正しいソース順序の代用として使用してはなりません。これは文書のアクセシビリティを損なう原因となります。

1.2. 値の定義

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

各プロパティ定義に記載されている値に加え、本仕様で定義される全てのプロパティはCSS全域キーワードも値として受け入れます。可読性のため、明示的な繰り返し記載はしていません。

2. 概要

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

グリッドレイアウトは、グリッド（水平線と垂直線が交差する集合体）を用いてコンテンツのレイアウトを制御します。これにより、グリッドコンテナ内コンテンツのサイズ・配置座標系が作られます。グリッドレイアウトの特徴：

固定・柔軟・コンテンツベースのトラックサイズ指定関数
正方向（正の値）および逆方向（負の値）の数値グリッド座標、名前付きグリッドライン・グリッド領域による明示的なアイテム配置、 orderによる並べ替えを含む空領域への自動配置
スペースに応じたトラックの繰り返しと、追加コンテンツに合わせた行・列の自動追加
マージン、ガター、整列プロパティによる整列・間隔の制御
コンテンツを重ねたり、z-indexで重なり順を制御できる

グリッドコンテナは入れ子や、必要に応じてフレックスコンテナと混在させて、より複雑なレイアウトを構築できます。

2.1. グリッドの宣言

トラック（行と列）は、グリッドで明示的に明示的グリッドプロパティで宣言・サイズ指定するか、明示的グリッド外にアイテムを配置した場合は暗黙的に作成されます。 gridショートハンドとそのサブプロパティでグリッドのパラメーターを定義します。§ 7 グリッドの定義

以下はグリッド宣言の例です：

次は4つの名前付き領域（H、A、B、F）を持つグリッドを宣言します。 1列目は内容に合わせてサイズ指定（auto）し、 2列目は残りのスペースを占めます（1fr）。行はデフォルトでauto（内容ベース）サイズですが、最後の行は固定サイズ30pxです。
```
main {
  display: grid;
  grid: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}
```
次は、グリッドコンテナ（100vh）の高さに収まるだけの最低5emの行を持つグリッドを宣言します。グリッドには明示的な列がなく、列はコンテンツ追加時に追加され、列幅が均等化されます（1fr）。右に溢れるコンテンツは印刷されないため、印刷時には行を追加するレイアウトを用います。
```
main {
  display: grid;
  grid: repeat(auto-fill, 5em) / auto-flow 1fr;
  height: 100vh;
}
@media print {
  display: grid;
  main {
    grid: auto-flow 1fr / repeat(auto-fill, 5em);
  }
}
```
次は、均等な5列と3行を持ち、中央の行が残りのスペース（かつ内容を収めるのに十分な高さ）を占めるグリッドを宣言します。
```
main {
  display: grid;
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}
```

2.2. アイテムの配置

グリッドコンテナの内容は個々のグリッドアイテム（フレックスアイテムに類似）に整理され、グリッド領域に割り当てられます。 grid-placementプロパティで座標による明示的配置、 auto-placementによる空領域への暗黙的配置が可能です。§ 8 グリッドアイテムの配置

以下はgrid-areaショートハンドを使った配置宣言の例です：

grid-area: a;          /* 名前付きグリッド領域“a”に配置     */
grid-area: auto;       /* 次の空領域に自動配置             */
grid-area: 2 / 4;      /* 2行目・4列目に配置               */
grid-area: 1 / 3 / -1; /* 3列目・全行にスパンして配置      */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                       /* 名前付きラインで配置              */

これらはgrid-row＋grid-column宣言と同等です：

grid-row: a;                         grid-column: a;
grid-row: auto;                      grid-column: auto;
grid-row: 2;                         grid-column: 4;
grid-row: 1 / -1;                    grid-column: 3;
grid-row: header-start / footer-end; grid-column: sidebar-start / sidebar-end;

さらに、grid-row-start/grid-row-end/grid-column-start/grid-column-endロングハンドに分解できます。例：

grid-area: a;
/* grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; と同等 */

grid-area: 1 / 3 / -1;
/* grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; と同等 */

2.3. グリッドのサイズ指定

グリッドアイテムが配置された後、グリッドトラック（行・列）のサイズが計算されます。これは内容のサイズやグリッド定義で指定された利用可能スペースを考慮します。

サイズ指定されたグリッドは、整列され、グリッドコンテナ内でグリッドコンテナのalign-contentやjustify-contentプロパティに従って配置されます。§ 10 整列と間隔

次の例は、余ったスペースを列間に分配してすべての列を均等に配置し、グリッドが100vhより小さい場合はグリッド全体をグリッドコンテナ内中央に整列します。

main {
  display: grid;
  grid: auto-flow auto / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}

最後に、各グリッドアイテムは割り当てられたグリッド領域内で、自身のサイズ指定 [CSS2]や整列プロパティ [CSS-ALIGN-3]によってサイズ・整列されます。

3. グリッドレイアウトの概念と用語

グリッドレイアウトでは、グリッドコンテナの内容をグリッド上に配置・整列することでレイアウトします。グリッドは、水平・垂直のグリッドラインが交差する集合体であり、グリッドコンテナの空間をグリッド領域に分割します。グリッドアイテム（グリッドコンテナのコンテンツを表す）は、この領域に配置されます。グリッドラインは2種類あり、一方はブロック軸に沿って走る列を定義し、もう一方はインライン軸に沿った行を定義します。[CSS3-WRITING-MODES]

画像：グリッドライン。 — グリッドライン：ブロック軸に3本、インライン軸に4本。

3.1. グリッドライン

グリッドラインは、グリッドの水平・垂直の区切り線です。グリッドラインは各列・行の両端に存在します。数値インデックスまたは著者が指定した名前で参照できます。グリッドアイテムは、グリッドラインを参照して、グリッド内の自身の位置をgrid-placementプロパティで決定します。

次の2つの例は、いずれも3つの列グリッドラインと4つの行グリッドラインを生成します。

最初の例は、グリッドアイテムをグリッドライン番号で配置する方法を示します：

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

#item1 { grid-column: 2;
         grid-row-start: 1; grid-row-end: 4; }

2つ目の例は、明示的に名前を付けたグリッドラインを使用します：

/* 前例と同等のレイアウトですが、名前付きラインを使用 */
#grid {
  display: grid;
  grid-template-columns: 150px [item1-start] 1fr [item1-end];
  grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
}

#item1 {
  grid-column: item1-start / item1-end;
  grid-row: item1-start / item1-end;
}

3.2. グリッドトラックとセル

グリッドトラックは、グリッド列またはグリッド行の総称で、つまり隣接する2つのグリッドラインの間の空間です。各グリッドトラックにはサイズ指定関数が割り当てられ、それによって列や行の幅・高さがどれだけ伸びるかが制御されます。したがって、境界となるグリッドライン同士の距離が決まります。隣接するグリッドトラック同士はガターで分離できますが、通常は密接に詰められます。

グリッドセルは、グリッド行とグリッド列の交点です。グリッド内でグリッドアイテムを配置する際に参照できる最小単位です。

次の例では2列3行です。 1列目は150px固定です。 2列目は柔軟なサイズ指定を使い、グリッド内の割り当てられていない空間に応じて変動します。そのため、グリッドコンテナの幅が200pxなら2列目は50px、幅が100pxなら2列目は0pxとなり、その列に配置されたコンテンツはグリッドコンテナからはみ出します。

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* 2列 */
  grid-template-rows: 50px 1fr 50px; /* 3行 */
}

3.3. グリッド領域

グリッド領域は、1つ以上のグリッドアイテムのレイアウトに使われる論理的な空間です。グリッド領域は、隣接する1つ以上のグリッドセルから構成されます。グリッド領域の四方にはそれぞれ1本ずつグリッドラインがあり、交差するグリッドトラックのサイズ指定に関与します。グリッド領域は、grid-template-areasプロパティで明示的に名前付けするか、境界となるグリッドラインによって暗黙的に参照できます。グリッドアイテムはgrid-placementプロパティでグリッド領域に割り当てられます。

/* テンプレート構文の例 */
#grid  {
  display: grid;
  grid-template-areas: ". a"
                       "b a"
                       ". a";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
  height: 100vh;
}

#item1 { grid-area: a }
#item2 { grid-area: b }
#item3 { grid-area: b }

/* アイテム2と3をグリッド領域 "b" の異なる位置に整列 */
/* デフォルトではグリッドアイテムは領域いっぱいにストレッチされ、
   これらのアイテムは重なって表示されます。 */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

グリッドアイテムのグリッド領域は、そのアイテムがレイアウトされる包含ブロックを形成します。同じグリッド領域に配置されたグリッドアイテム同士は、直接的には互いのレイアウトに影響しません。ただし、間接的には、グリッドアイテムがグリッドトラックの内在サイズ指定関数を持つ場合、そのトラックのサイズ（ひいては境界となるグリッドラインの位置）に影響を与え、別のグリッドアイテムの位置やサイズにも影響することがあります。

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

グリッドレイアウトは、著者に文書の並べ替えの強力な機能を提供します。しかし、これは文書ソースの正しい順序の代用ではありません。 orderプロパティやグリッド配置は、非視覚メディア（たとえば音声）の順序には影響しません。同様に、グリッドアイテムの視覚的な並べ替えは、シーケンシャルなナビゲーションモードのデフォルトの巡回順序（例えばリンクの巡回、tabindex [HTML]参照）には影響しません。

著者はorderおよびグリッド配置プロパティを、論理順序ではなく視覚的な並べ替えのみに使用しなければなりません。これらの機能を用いて論理的な並べ替えを行うスタイルシートは非準拠です。

注：これは、非視覚メディアや非CSSユーザーエージェントが、通常は線形にコンテンツを提示するため、論理的なソース順序に依存できるようにするためです。一方、グリッドレイアウトの配置や並べ替え機能は視覚的な配置調整のために利用されます。（視覚的な認識は二次元・非線形であり、望ましい視覚順序が常に望ましい読み順と一致するとは限りません。）

多くのウェブページは、マークアップが似た形状を持っています。上部にヘッダー、下部にフッター、そして中央にコンテンツ領域と1～2つの追加カラムがあります。一般的には、ページのソースコードではコンテンツが追加カラムより先に来ることが望ましいです。しかし、これにより、たとえば追加カラムを左側、コンテンツを右側に配置したいといった一般的なデザインが難しくなります。この問題は、長年にわたり様々な方法で解決されてきました。追加カラムが2つある場合は「Holy Grail Layout」と呼ばれることもあります。グリッドレイアウトならこの例も簡単に実現できます。例えば、ページのコードと希望するレイアウトのスケッチは次の通りです：

<!DOCTYPE html>
<header>...</header>
<main>...</main>
<nav>...</nav>
<aside>...</aside>
<footer>...</footer>

このレイアウトはグリッドレイアウトで簡単に実現できます：

body { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
main    { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }

さらに、デフォルトではすべてのカラムが等しい高さとなり、メインコンテンツは画面サイズいっぱいに広がります。また、このレイアウトはメディアクエリとも組み合わせ可能で、狭い画面では縦型レイアウトに切り替えられます：

@media all and (max-width: 60em) {
  /* 3カラムを維持できないほど狭い場合 */
  body { display: block; }
}

著者が意図した順序をすべての表示モードで維持するために、 WYSIWYGエディタやWebベースのオーサリング支援ツールなどのオーサリングツールは、基本的な文書ソース自体を並べ替えなければなりません。著者が明示的に文書順（音声やナビゲーション順を決定する）が視覚順と同期しないことを指定しない限り、 orderやグリッド配置プロパティによる並べ替えを使ってはなりません。

例えば、ツールがグリッドアイテムのドラッグ＆ドロップ配置の機能や、画面サイズごとのレイアウト切替のためのメディアクエリ対応を提供する場合があります。

通常、並べ替えはすべての画面サイズやナビゲーション・音声順にも影響すべきなので、ツールはドラッグ＆ドロップによる視覚的な並べ替えを、 DOM階層の並べ替えとも連動させて実現します。ただし場合によっては、著者が画面サイズごとに視覚的な配置のみ変えたいこともあります。その場合、ツールはグリッド配置プロパティとメディアクエリを組み合わせて、最も小さい画面サイズではDOM順序（論理的な線形提示順になる可能性が高い）に合わせ、他のサイズではグリッド配置プロパティで視覚的な並べ替えを行う機能を提供できます。

このようなツールは準拠ですが、ドラッグ＆ドロップの並べ替えをグリッド配置プロパティだけで処理するもの（実装が便利であっても）は非準拠となります。

5. グリッドコンテナ

5.1. グリッドコンテナの確立：gridおよびinline-grid display 値

名前:	display
新しい値:	grid \| inline-grid

grid: この値は、要素がグリッドコンテナボックスを生成します。フローレイアウト内に配置される場合はブロックレベルとなります。
inline-grid: この値は、要素がグリッドコンテナボックスを生成します。フローレイアウト内に配置される場合はインラインレベルとなります。

グリッドコンテナは、内容のための独立したグリッドフォーマッティングコンテキストを確立します。これは、独立したブロックフォーマッティングコンテキストの確立と同じですが、ブロックレイアウトの代わりにグリッドレイアウトが使われる点が異なります。浮動要素（float）はグリッドコンテナに侵入せず、グリッドコンテナのマージンは内容のマージンと折りたたまれません。グリッドコンテナの内容は、グリッドにレイアウトされ、グリッドラインが各グリッドアイテムの包含ブロックの境界を形成します。

グリッドコンテナはブロックコンテナではないため、ブロックレイアウトを前提に設計された一部のプロパティはグリッドレイアウトでは適用されません。特に：

floatやclearはグリッドアイテムには効果がありません。ただし、floatプロパティはグリッドコンテナの子要素のdisplayの算出値には影響します。これはグリッドアイテムが決定される前に発生します。
vertical-alignはグリッドアイテムには効果がありません。
::first-lineや::first-letter疑似要素はグリッドコンテナには適用されず、グリッドコンテナは先頭の整形済み行や文字を祖先に提供しません。

要素の指定されたdisplayがinline-gridで、その要素が浮動または絶対配置されている場合、 displayの算出値はgridになります。 CSS 2.1 第9.7章の表には追加の行が加えられ、「指定値」欄にinline-grid、「算出値」欄にgridが入ります。

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

このセクションの用語定義については[CSS-SIZING-3]を参照してください。

グリッドコンテナは、参加しているフォーマッティングコンテキストのルールに従ってサイズ指定されます：

ブロックレベルボックスとしてブロックフォーマッティングコンテキスト内にある場合、フォーマッティングコンテキストを確立するブロックボックスと同様にサイズ指定されます。 autoのインラインサイズは、非置換ブロックボックスと同様に計算されます。
インラインフォーマッティングコンテキスト内のインラインレベルボックスとしては、インラインブロックなどの原子的インラインレベルボックス同様にサイズ指定されます。

インライン・ブロック両方のフォーマッティングコンテキストにおいて、グリッドコンテナのautoのブロックサイズはmax-contentサイズになります。

ブロックレイアウト仕様でこの挙動も定義すべきですが、まだ策定されていません。

max-contentサイズ（min-contentサイズ）は、グリッドコンテナの適切な軸において、グリッドコンテナのトラックサイズ（ガターを含む）の合計です。これは、グリッドがmax-content制約（min-content制約）下でサイズ指定された場合に計算されます。

5.3. スクロール可能なグリッドのオーバーフロー

overflow プロパティはグリッドコンテナに適用されます。

内在サイズ指定に含まれるように（§ 5.2 グリッドコンテナのサイズ指定参照）、グリッドもグリッドコンテナのスクロール可能なオーバーフロー領域に含まれます。

注：グリッドコンテナがスクロールコンテナの場合、パディングとの相互作用に注意してください。追加のパディングは、スクロール可能なオーバーフローレクトに必要に応じて追加され、スクロール可能なコンテンツをplace-content: endで整列するために使われます。詳しくはCSS Overflow 3 § 2.2 Scrollable Overflow

5.4. 大きすぎるグリッドの制限

メモリには限りがあるため、 UAは暗黙的グリッドのサイズをUA定義の制限内に抑えることができます（この制限は[-10000, 10000]範囲のラインを許容するべきです）。制限外のラインはすべて削除されます。グリッドアイテムがこの制限外に配置された場合、そのグリッド領域は制限グリッド内にクランプされなければなりません。

グリッド領域をクランプするには：

グリッド領域が制限グリッド外までスパンする場合、そのスパンは制限されたグリッドの最終ラインまでにクランプされます。
グリッド領域が完全に制限グリッド外に配置される場合、そのスパンは1に切り詰められ、領域はそのグリッド側の最終グリッドトラックへ再配置されます。

例えば、UAが各次元に最大1000トラックまでしかサポートしない場合、以下の配置プロパティ：

.grid-item {
  grid-row: 500 / 1500;
  grid-column: 2000 / 3000;
}

は、次のように解釈されます：

.grid-item {
  grid-row: 500 / 1001;
  grid-column: 1000 / 1001;
}

6. グリッドアイテム

大まかに言えば、グリッドアイテムはグリッドコンテナのフロー内コンテンツを表すボックスです。

フロー内の各子要素はグリッドコンテナのグリッドアイテムとなり、各子テキストシーケンスは匿名のブロックコンテナでグリッドアイテムとしてラップされます。ただし、テキストシーケンスが空白文字のみ（white-spaceプロパティで影響を受ける文字）で構成される場合は、（テキストノードがdisplay:noneの場合と同様に）レンダリングされません。

グリッドアイテムの例：

<div style="display: grid">

  <!-- グリッドアイテム：ブロック子要素 -->
  <div id="item1">block</div>

  <!-- グリッドアイテム：floatされた要素（floatは無視される） -->
  <div id="item2" style="float: left;">float</div>

  <!-- グリッドアイテム：インラインコンテンツの周りの匿名ブロックボックス -->
  anonymous item 3

  <!-- グリッドアイテム：インライン子要素 -->
  <span>
    item 4
    <!-- グリッドアイテムは ブロックの周りで分割されない -->
    <q style="display: block" id=not-an-item>item 4</q>
    item 4
  </span>
</div>

上記コードから決定されるグリッドアイテム

注：要素間の空白は消失します。自身のグリッドアイテムにはなりませんが、要素間テキストは匿名グリッドアイテムでラップされます。

注：匿名アイテムのボックスはスタイル指定できません。スタイルルールを割り当てる要素がないためです。ただし、内容はグリッドコンテナから（フォント設定などの）スタイルを継承します。

6.1. グリッドアイテムの表示

グリッドアイテムは、その内容のための独立したフォーマッティングコンテキストを確立します。ただし、グリッドアイテムはグリッドレベルボックスであり、ブロックレベルボックスではありません。それらはコンテナのグリッドフォーマッティングコンテキストに参加し、ブロックフォーマッティングコンテキストには参加しません。

要素の最も近い祖先要素（display:contentsの祖先はスキップ）が grid またはinline-gridの場合、その要素自身のdisplay値はブロック化されます。（この種のdisplay値変換の詳細はCSS2.1§9.7 [CSS2]や CSS Display 3 § 2.7 Automatic Box Type Transformationsを参照。）

注： gridや inline-grid要素が実際にはグリッドコンテナボックスを生成しない場合（例：置換要素やdisplay: noneサブツリーの場合）でもブロック化は発生します。

注： displayの一部の値は、元のボックスの周りに匿名ボックスを生成します。そのようなボックスがグリッドアイテムだった場合、まずブロック化されるため、匿名ボックス生成は行われません。例えば、2つ並んだグリッドアイテムがdisplay: table-cellの場合は、2つのdisplay: block グリッドアイテムとなり、単一の匿名テーブルとしてラップされることはありません。

6.2. グリッドアイテムのサイズ指定

グリッドアイテムは、自身のグリッド領域で定義された包含ブロック内でサイズ指定されます。

指定された軸におけるグリッドアイテムの自動サイズの計算方法は、 self-alignment値によって異なります：

normal

グリッドアイテムがpreferred aspect ratioを持たず、対象軸にnatural sizeがない場合（置換要素の場合）、グリッドアイテムはalign-self: stretchと同様にサイズ指定されます。

それ以外の場合は、対応する軸におけるブロックレベル要素のサイズ計算ルールに従ってサイズ指定されます。（CSS 2 §  10 視覚フォーマットモデルの詳細参照）

stretch

inline sizeの計算ルール（非置換ボックス、CSS 2 § 10.3.3 ブロックレベル非置換要素の通常フローで定義）を使用し、すなわちstretch-fit sizeとなります。

注：他軸でもサイズが制約されている場合、preferred aspect ratioを持つアイテムのアスペクト比が歪むことがあります。

その他の値

アイテムはfit-contentとしてサイズ指定します。

次の参考表はグリッドアイテムの自動サイズ指定の挙動をまとめたものです：

グリッドアイテムの自動サイズ指定挙動のサマリー
整列方法	非置換要素のサイズ	置換要素のサイズ
normal	グリッド領域全体を埋める	natural sizeを使用
stretch	グリッド領域全体を埋める	グリッド領域全体を埋める
start/center/その他	fit-contentサイズ（float要素のように）	natural sizeを使用

注： auto値の min-widthおよびmin-heightは、該当軸のトラックサイズ指定に対してフレックスアイテムのメインサイズに対する挙動と同様に作用します。 § 6.6 グリッドアイテムの自動最小サイズ参照。

6.3. 並べ替えられたグリッドアイテム：order プロパティ

orderプロパティはグリッドアイテムにも適用されます。これは自動配置や描画順に影響します。

フレックスアイテムの並べ替えと同様に、 orderプロパティは、視覚的な順序が音声やナビゲーション順と同期しない場合のみ使用してください。それ以外は、文書ソース自体を並べ替えるべきです。詳細はCSS Flexbox 1 § 5.4.1 並べ替えとアクセシビリティ（[CSS-FLEXBOX-1]）参照。

6.4. グリッドアイテムのマージンとパディング

隣接するグリッドアイテムは、それぞれ自身のグリッド領域によって形成された包含ブロックに独立して収められるため、隣接するグリッドアイテムのマージンは折り畳みされません。

パーセンテージ指定のマージン・パディングは、グリッドアイテムの場合もブロックボックスの場合と同様、自身のinline size（包含ブロック）に対して解決されます。つまり、左右上下のパーセンテージはすべて、横書きモードでは包含ブロックのwidthに対して解決されます。

autoマージンは、対応する次元の余ったスペースを吸収するため拡張され、整列にも利用できます。 § 10.2 autoマージンによる整列参照。

6.5. Z軸順序：z-index プロパティ

グリッドアイテムは、交差するグリッド領域に配置された場合や、負のマージンや位置指定によって非交差領域に配置された場合でも、重なり合うことがあります。グリッドアイテムの描画順は、インラインブロックと全く同じです[CSS2]。ただし、素の文書順の代わりにorder-modified文書順が使われ、 z-index がauto以外の値の場合は、 position がstaticでもスタッキングコンテキストが形成されます（positionがrelativeの場合と同様の挙動）。従って、z-indexプロパティでグリッドアイテムのZ軸順序制御が容易にできます。

注: グリッドアイテム外に位置指定された子孫要素も、そのグリッドアイテムが確立したスタッキングコンテキストに参加します。

次の図は、複数のグリッドアイテムが重なっている様子を示しています。暗黙のソース順と、明示的なz-index の組み合わせでスタッキング順序を制御しています。

<style type="text/css">
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}
#A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
#B { grid-column: 1; grid-row: 1; z-index: 10; }
#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
     z-index: 5; justify-self: center; align-self: center; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>

6.6. グリッドアイテムの自動最小サイズ

注：このセクション（および仕様全体）で使われるサイズ指定用語の多くは、CSS Intrinsic and Extrinsic Sizing [CSS-SIZING-3]で定義されています。

最小サイズのより合理的なデフォルト値をグリッドアイテムに提供するため、指定軸における自動最小サイズの使用値は、以下すべてが真のとき内容ベースの最小サイズとなります：

その算出されたoverflow値がスクロール可能なオーバーフロー値でないこと
その軸で少なくとも1つトラックにまたがり、その最小トラックサイズ指定関数がautoであること
その軸で複数トラックにまたがる場合、それらのトラックに柔軟トラックが含まれていないこと

それ以外の場合、自動最小サイズは通常どおり0となります。

注：内容ベースの最小サイズは内在サイズ寄与の一種であり、CSS Sizing 3 § 5.2 Intrinsic Contributionsの規定が適用されます。

指定された次元でのグリッドアイテムの内容ベースの最小サイズは、指定サイズ提案があればそれ、なければ転送サイズ提案（存在し、かつ要素が置換要素ならそれ）、それ以外は内容サイズ提案となります（後述）。ただし、指定次元でグリッドアイテムがグリッドトラックのうち固定最大トラックサイズ指定関数のみをまたぐ場合は、その次元での指定サイズ提案と内容サイズ提案（およびこの次元から反対軸への転送サイズ提案への入力）は、その次元におけるストレッチフィットでグリッド領域の最大サイズ以下にクランプされます。これは対象となるグリッドトラックの最大トラックサイズ指定関数の合計と間にある固定ガターを合計した値です。

いずれの場合も、サイズ提案は該当軸の最大サイズ（確定値の場合）によって追加でクランプされます。アイテムが圧縮可能な置換要素で、対象軸に確定値の希望サイズや最大サイズがあれば、そのサイズで上限されます。この際、サイズに未確定のパーセンテージが含まれる場合は0として解決し確定値とみなされます。

注： fit-content()の引数は、内容ベースの最小サイズを固定最大トラックサイズ指定関数と同じ方法ではクランプしません。

この計算で使われる内容サイズ提案、指定サイズ提案、および転送サイズ提案は、関連するmin/max/希望サイズプロパティを考慮して、内容ベースの最小サイズが著者指定の制約を妨げないようになっています。定義は下記のとおりです：

指定サイズ提案: アイテムの対象軸の希望サイズが確定値であれば、指定サイズ提案はそのサイズ。それ以外は未定義。
転送サイズ提案: アイテムが希望アスペクト比を持ち、反対軸の希望サイズが確定値なら、転送サイズ提案は（反対軸の最小および最大サイズが確定値の場合はそれでクランプしつつ）、アスペクト比で変換したサイズとなる。それ以外は未定義。
アイテムが対象軸に確定値の希望サイズや最大サイズを持つ場合、転送サイズ提案はそれらで上限されます。この際サイズに未確定パーセンテージが含まれる場合は、0として解決し確定値とみなします。
内容サイズ提案: 内容サイズ提案は、対象軸のmin-contentサイズであり、希望アスペクト比がある場合は、反対軸の確定値の最小・最大サイズをアスペクト比で変換してクランプします。

ボックスの内在サイズ（例：min-contentサイズ）の計算目的においては、内容ベースの最小サイズはその軸でボックスサイズを未確定とします（たとえばwidthプロパティで確定値サイズを指定していた場合でも）。このため、このサイズに対するパーセンテージはautoとして扱われます。

内在サイズ計算以外の目的では、内容ベースの最小サイズ（明示的なmin-contentなどの最小サイズとは異なり）ボックスサイズを未確定にはしません。ただし、その最小値適用前にパーセンテージが解決されていた場合は、適用後の新サイズに再解決する必要があります。

内容ベースの最小サイズは多くの場合適切であり、コンテンツの重なりやはみ出しを防ぐ助けになりますが、適切でない場合もあります：

特に、グリッドレイアウトが文書の主要コンテンツ領域に使われる場合は、min-width: 12emのようなフォント相対の明示的な最小幅を指定する方がよいです。内容ベースの最小幅では、大きなテーブルや画像がコンテンツ全体のサイズを引き延ばし、オーバーフローゾーンに達したり、テキスト行が不必要に長くなって読みにくくなることがあります。

また、内容ベースのサイズ指定を大量のコンテンツを持つアイテムに使う場合、レイアウトエンジンは最小サイズを求めるためにすべてのコンテンツを走査する必要がありますが、著者が明示的な最小値を指定した場合は不要です。（少量のコンテンツなら走査負荷は無視でき、パフォーマンス問題にはなりません。）

7. グリッドの定義

7.1. 明示的グリッド

3つのプロパティgrid-template-rows、grid-template-columns、grid-template-areasは、グリッドコンテナの明示的グリッド（明示的グリッドトラック）を定義します。実際のグリッドは、明示的グリッド外にグリッドアイテムが配置された場合、さらに大きくなり、この場合暗黙的トラックが生成されます。暗黙的トラックのサイズ指定はgrid-auto-rowsやgrid-auto-columnsプロパティで決まります。

明示的グリッドのサイズは、 grid-template-areasが定義する行・列数と grid-template-rows/grid-template-columnsがサイズ指定する行・列数のいずれか大きい方で決まります。 grid-template-areasで定義されていても、grid-template-rows/grid-template-columnsでサイズ指定されていない行・列は grid-auto-rows/grid-auto-columnsプロパティのサイズを取ります。これらのプロパティで明示的トラックが1つも定義されていなくても、明示的グリッドは各軸に1本のグリッドラインを持ちます。

grid-placementプロパティで使う数値インデックスは明示的グリッドの端から数えます。正のインデックスはstart側から（start端の明示的ラインを1とする）、負のインデックスはend側から（end端の明示的ラインを-1とする）数えます。

gridおよびgrid-templateプロパティは、3つの明示的グリッドプロパティ（grid-template-rows、grid-template-columns、grid-template-areas）をまとめて設定できるショートハンドです。 gridショートハンドは暗黙的グリッドを制御するプロパティもリセットしますが、 grid-templateプロパティはそれらを変更しません。

7.2. 明示的トラックサイズ指定：grid-template-rows および grid-template-columns プロパティ

名前:	grid-template-columns, grid-template-rows
値:	none \| <track-list> \| <auto-track-list>
初期値:	none
適用対象:	グリッドコンテナ
継承:	no
パーセンテージ:	コンテンツ領域の該当寸法に対して参照される
算出値:	キーワード none または算出トラックリスト
正規順序:	文法による
アニメーション型:	リスト長が一致する場合は、算出トラックリストの各アイテムごとに算出値型で。(§ 7.2.5 トラックリストの算出値と § 7.2.3.3 repeat() の補間/組み合わせ参照)。一致しない場合は離散型

これらのプロパティは、空白区切りのトラックリストとして、ライン名とトラックサイズ指定関数をグリッドに指定します。 grid-template-columns プロパティはグリッドの列用のトラックリストを指定し、 grid-template-rows はグリッドの行用のトラックリストを指定します。

値の意味は以下の通りです：

none: このプロパティによって明示的なグリッドトラックは作成されません（ただし明示的グリッドトラックは grid-template-areas によって作成される場合があります）。
注：明示的グリッドがない場合、行・列は暗黙的に生成され、そのサイズは grid-auto-rows や grid-auto-columns プロパティで決まります。
<track-list> | <auto-track-list>: トラックリストを、トラックサイズ指定関数とライン名の並びとして指定します。各トラックサイズ指定関数は、長さ、パーセンテージ（グリッドコンテナのサイズに対する）、列や行を占める内容の寸法、グリッド内の空きスペースの割合などで指定できます。 minmax()記法を使って範囲指定もでき、それぞれの列や行に対して最小・最大トラックサイズ指定関数を個別に指定できます。

トラックリストの構文は以下の通りです：

<track-list>          = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list>     = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
                        [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

<track-size>          = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage [0,∞]> )
<fixed-size>          = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<track-breadth>       = <length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto
<inflexible-breadth>  = <length-percentage [0,∞]> | min-content | max-content | auto
<fixed-breadth>       = <length-percentage [0,∞]>
<line-names>          = '[' <custom-ident>* ']'

各コンポーネント値の定義は以下です…

7.2.1. トラックサイズ

<length-percentage [0,∞]>

CSS3 Valuesで定義される、負でない長さまたはパーセンテージ。 [CSS-VALUES-3]

<percentage>値は、列グリッドトラックの場合は内側のインラインサイズ、行グリッドトラックの場合は内側のブロックサイズに対して相対。グリッドコンテナのサイズがトラックサイズに依存する場合、 <percentage>はautoとして扱われ、グリッドコンテナの内在サイズ計算のために使われ、最終的なグリッドコンテナサイズに対して解決され、グリッドやアイテムのレイアウトに使われます。

<flex [0,∞]>

fr単位による、トラックのフレックス係数を指定する負でない次元。各<flex>サイズトラックは、残りスペースをフレックス係数の比率で分配します。例えば1fr 2frなら、トラックは残りスペースの1/3と2/3を占有します。詳細は§ 7.2.4 fr単位による柔軟長さ参照。

注：フレックス係数の合計が1未満の場合、残りスペース全体ではなく、その割合のみ占有します。

minmax()記法の外で現れる場合は、自動最小値（minmax(auto, <flex>)）が暗黙的に与えられます。

minmax(min, max)

min以上、max以下のサイズ範囲を定義します。 maxがmin未満の場合、maxはminで切り捨てられ（minmax(min, min)となる）、最大値としての<flex>値はトラックのフレックス係数を設定し、最小値としては無効です。

注：将来の仕様レベルではフレックス最小値も許可され、トラックサイズ決定アルゴリズムも対応予定。

auto

最大値としては、該当max-content寄与の最大値を設定し、グリッドアイテムが占めるグリッドトラックの最大値となります。 max-contentとは異なり、 align-content や justify-content でトラックを拡張可能。

最小値としては、該当最小サイズ（min-width/min-heightで指定）となります。（初期値は多くの場合 min-content 最小値と等しいですが、常にそうとは限りません。詳細は § 6.6 グリッドアイテムの自動最小サイズ参照。）

minmax()記法外で現れる場合は、minmax(auto, auto)と同等で、上記の最小～最大範囲を表します。（基本的な場合は minmax(min-content, max-content)と同様の挙動ですが、追加機能あり。）

max-content

該当max-content寄与の最大値（グリッドアイテムが占めるグリッドトラックの最大値）を表します。

min-content

該当min-content寄与の最大値（グリッドアイテムが占めるグリッドトラックの最大値）を表します。

fit-content( <length-percentage> )

次の式を表します： max(minimum, min(limit, max-content)) minimumはauto 最小値（多くの場合 min-content最小値と等しいことが多い）であり、 limitは track sizing function。実質的には minmax(auto, max-content) と minmax(auto, limit) の小さい方になります。

次の grid-template-columns 宣言の場合：

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

5つのグリッドラインが生成されます：

グリッドコンテナの開始端
グリッドコンテナの開始端から100px
前のラインから、空きスペース（グリッドコンテナの幅から非フレックスグリッドトラックの幅を引いたもの）の半分
前のラインから、2つのライン間の列に属するグリッドアイテムの最大サイズ分離れる
前のラインから、2つのライン間の列に属するグリッドアイテムの最大最小サイズ以上、かつ空きスペースの残り半分以下

非フレックスサイズ（100px、max-content、min-content）の合計がグリッドコンテナの幅を超える場合、最後のグリッドラインは開始端からその合計距離の位置（1frサイズは両方とも0として解決）。合計がグリッドコンテナの幅より小さい場合、最後のグリッドラインは終了端に一致。これは、<flex>値がトラックサイズに含まれる場合は常に成立します。

有効なグリッドトラック定義の追加例：

/* トラック定義の有効例 */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px);

注：グリッドのサイズは単純なトラックサイズ合計だけでなく、row-gap、column-gap や justify-content、align-content によるトラック間の追加スペースによっても変化します。

7.2.2. グリッドラインの命名：[<custom-ident>*]構文

グリッドラインは常に数値インデックスで参照できますが、ライン名を使うことでグリッド配置プロパティの理解や保守が容易になります。ライン名は、明示的に割り当てることもでき、grid-template-rowsやgrid-template-columnsプロパティで指定します。また、名前付きグリッド領域によって暗黙的に割り当てることもでき、これはgrid-template-areasプロパティで行えます。

例：次のコードはグリッド内すべてのラインに意味のある名前を付与しています。一部のラインには複数の名前が付与されている点に注意してください。

#grid {
  display: grid;
  grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
  grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

ライン名にはspanやautoは使用できません。つまり、<custom-ident>は<line-names>生成規則において spanとautoキーワードを除外します。

7.2.3. 行・列の繰り返し：repeat()記法

repeat()記法はトラックリストの繰り返し断片を表し、多数の列や行でパターンが繰り返される場合に、よりコンパクトに記述できます。

この例は、同じグリッド定義を2通りの方法で記述しています。どちらの宣言も「main」列を4つ（各250px）、さらに「gutter」列を10pxで囲みます。

grid-template-columns: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;
/* 上記と同じだが、より簡潔に記述可能 */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;

7.2.3.1. repeat()の構文

repeat()構文の一般形は概ね以下の通りです：

repeat( [ <integer [1,∞]> | auto-fill | auto-fit ] , <track-list> )

第1引数は繰り返し回数を指定します。第2引数はトラックリストで、そのパターンが指定回数繰り返されます。ただしいくつか制約があります：

repeat()記法は入れ子にできません。
自動繰り返し（auto-fillやauto-fit）は、完全な内在サイズや柔軟サイズと組み合わせできません（文法参照）。

このため、repeat()記法の厳密な構文は複数の形式があります：

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

<track-repeat>は任意の<track-size>の繰り返しを表現できますが、繰り返し回数は固定です。
<auto-repeat>は自動でスペースを埋める繰り返しができますが、繰り返し回数計算のために確定サイズのトラックが必要です。トラックリスト内に1回しか現れず、ただし同じトラックリストに<fixed-repeat>も含められます。

repeat()関数が隣接した2つの<line-names>を配置した場合、名前リストはマージされます。例：repeat(2, [a] 1fr [b])は[a] 1fr [b a] 1fr [b]と同等。

7.2.3.2. 自動繰り返し：auto-fillとauto-fitの繰り返し

auto-fillを繰り返し数として指定した場合、グリッドコンテナの該当軸に確定した希望サイズまたは最大サイズがある場合、繰り返し回数はグリッドがcontent boxをオーバーフローしない最大の正整数（gapも考慮）。どの繰り返し数でもオーバーフローする場合は1回のみ。それ以外で該当軸に確定した最小サイズがあれば、その最小条件を満たす最小の正整数回数。それ以外は指定されたトラックリストが1回のみ繰り返されます。

この計算では、各トラックは最大トラックサイズ指定関数が確定値ならそれ、そうでなければ最小トラックサイズ指定関数が確定値ならそれとして扱います。両方確定値なら、最大トラックサイズ指定関数を最小トラックサイズ指定関数で切り捨てます。どちらも未確定なら繰り返し回数は1です。

例：次のコードはウィンドウ幅に収まるだけ25文字幅の列を生成します。残りスペースは25文字列間で分配されます。

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}

auto-fitキーワードはauto-fillと同じですが、グリッドアイテムの配置後、空の繰り返しトラックは折り畳みされます。空トラックとは、フロー内グリッドアイテムが配置・スパンされていないトラックです。（全トラックが折り畳みされる場合もあり得ます。）

折り畳みグリッドトラックは、トラックサイズ指定関数が固定値0pxとみなされ、両隣のガター（分布整列によるスペースも含む）は折り畳みされます。

自動繰り返しトラック数の算出には、UAはトラックサイズをUA定義値で切り捨て、0で割ることを回避します。この下限値は1pxが推奨です。

7.2.3.3. repeat() の補間・組み合わせ

2つのrepeat()記法が第1引数（繰り返し回数）・第2引数（トラックリスト）のトラック数ともに一致している場合、算出トラックリストの各構成要素を算出値で組み合わせて結合します（トップレベルトラックリストの結合と同じ）。それ以外の場合は離散的に組み合わせます。

7.2.4. 柔軟な長さ：fr単位

柔軟な長さまたは<flex>は fr単位の次元であり、残りスペースをグリッドコンテナ内で分配します。 fr単位でサイズ指定されたトラックは柔軟トラックと呼ばれ、残りスペースに応じてフレックスコンテナ内のflex itemと同じように拡張されます。

残りスペースの分配は、全ての非柔軟トラックサイズ指定関数が最大値に達した後に行われます。これら行や列の合計サイズを利用可能スペースから差し引き、残りスペースを算出し、フレックスサイズの行・列にフレックス係数比で分配します。

各列・行の残りスペースの分配量は、 <flex> * <leftover space> / <全フレックス係数の合計> で計算可能です。

<flex>値が0fr～1frの範囲の場合は特別な挙動があります：フレックス係数合計が1未満なら残りスペース全体ではなくその割合のみ占有。

トラックの<flex>値は残りスペースの比率を要求するもので、1frは「残りスペースの100%」。トラック合計が100%以上なら比率は維持しつつ全体を使い切るように再調整。 100%未満（例：3つの0.25frトラック）の場合は要求した分だけ占有し（各25%、残り25%は未使用）。詳細は§ 11.7 柔軟トラックの拡張参照。

この挙動はfr値が0に近づく連続性維持のため必要です。これがなければ1frトラックも0.1frも0.01frも残り全て占有し、値が十分小さくなると突然0になり何も占有しなくなります。この仕様ならfr係数が1未満になるほど残りスペース占有率が滑らかに減り、0なら何も占有しません。

この「部分的な占有」挙動が本当に欲しい場合を除き、値は1以上がおすすめです。例：1frと2frの方が、.33frや.67frよりも、トラック追加・削除時に意図通りの挙動になりやすいです。

利用可能スペースが無限の場合（グリッドコンテナの幅や高さが未確定の場合）、 frサイズトラックは内容サイズに合わせて、それぞれの割合を維持しつつサイズ指定されます。各frサイズトラックの使用サイズは、各トラックのmax-contentサイズをフレックス係数で割って「仮の1frサイズ」を算出し、その最大値を実際の1fr長さ（フレックス分数）とし、各トラックのフレックス係数を掛けて最終サイズとします。

注： <flex>値は<length>型ではなく（また一部の<length>型や<percentage>型と互換性もない）ため、 calc()式で他の単位型と組み合わせたりはできません。

7.2.5. トラックリストの算出値

算出トラックリストは、リストであり、ライン名セットとトラックセクションが交互に並び、最初と最後はライン名セットです。

ライン名セットは、（空の場合もある）ライン名の識別子からなる順序付きセットです。

トラックセクションは次のいずれかです：

minmax()関数記法で、1つのトラックのサイズを表します。各<length-percentage>が算出されます（これを算出トラックサイズと呼びます）。
repeat()関数記法で、繰り返しトラックリストセクションを表します。 <integer>が算出され、 <track-list>は算出トラックリストとして表現されます（これを算出repeat記法と呼びます）。

7.2.6. トラックリストの解決値

grid-template-rowsおよびgrid-template-columnsプロパティは、解決値特例プロパティです。[CSSOM]

要素がグリッドコンテナボックスを生成する場合、その解決値はgrid-template-rowsまたはgrid-template-columnsプロパティの使用値であり、次の方法で直列化されます：

すべてのトラックを個別に記述（暗黙・明示両方を含む）、repeat()記法は使用しない。
すべてのトラックサイズはピクセル長で記述され、サイズ指定関数に関係なくピクセル単位となる。
隣接するライン名は1つのブラケットセットにまとめられる。

上記リストの1番目の内容により、暗黙トラックも grid-template-rows等の一部として直列化されます。ただし、著者はこれらプロパティで暗黙トラックサイズを指定できません！そのためgrid-template-rowsや grid-template-columns値はラウンドトリップが正しく機能しない場合があります：

const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// このようなコードは 本来何も起こらないはずですが、
// 暗黙行が存在すると
// 暗黙行が明示行に変換され、
// グリッドアイテムの配置方法や全体サイズが変わる可能性があります！

これは初期実装の偶発的な仕様であり、後の実装にも何となく引き継がれたものです。 CSSWGでは、暗黙トラック情報取得用のCSSOM APIを策定するまではこの仕様を維持し、現状ではこれが唯一の取得方法であり、多くのページが依存しているため、今後この仕様からの削除を予定しています。

それ以外の場合（例：要素がdisplay: noneである、またはグリッドコンテナでない場合）は、解決値は単に算出値です。

<style>
#grid {
  width: 500px;
  grid-template-columns:
    [a]     auto
    [b]     minmax(min-content, 1fr)
    [b c d] repeat(2, [e] 40px)
            repeat(5, auto);
}
</style>
<div id="grid">
  <div style="grid-column-start: 1; width: 50px"></div>
  <div style="grid-column-start: 9; width: 50px"></div>
</div>
<script>
  var gridElement = document.getElementById("grid");
  getComputedStyle(gridElement).gridTemplateColumns;
  // [a] 50px [b] 320px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px
</script>

注：一般に、解決値は算出値ですが、2.1の古いプロパティの一部は例外です。ただし、このモジュール初期実装との互換性上、 grid-template-rowsやgrid-template-columnsは使用値を返す仕様としています。

CSSワーキンググループは grid-placementプロパティでも使用値を返すか検討中です。特に実装者からのフィードバックを求めています。議論はこちら。

7.3. 名前付き領域：grid-template-areas プロパティ

名前:	grid-template-areas
値:	none \| <string>+
初期値:	none
適用対象:	グリッドコンテナ
継承:	no
パーセンテージ:	該当なし
算出値:	キーワードnoneまたは文字列リスト
正規順序:	文法順
アニメーション型:	離散型

このプロパティは名前付きグリッド領域を指定します。これは特定のグリッドアイテムとは関連付けられませんが、 grid-placementプロパティから参照できます。 grid-template-areasプロパティの構文はグリッド構造の可視化も兼ねており、グリッドコンテナの全体レイアウトを理解しやすくします。

値の意味は以下の通りです：

none

このプロパティでは名前付きグリッド領域も明示的グリッドトラックも定義されません（ただし明示的グリッドトラックはgrid-template-columnsやgrid-template-rowsで作成可能）。

注：明示的グリッドが無い場合、行・列は暗黙的に生成され、そのサイズはgrid-auto-rowsやgrid-auto-columnsプロパティで決まります。

<string>+

grid-template-areasプロパティで指定された各文字列ごとに1行が生成されます。各セルごとに1列が作成されます。パース方法は次の通りです：

文字列を以下のトークンリストに分割します（最長一致の規則を使用）：

identコードポイントの連続はそのコードポイントからなる名前の名前付きセルトークン。
1個以上の"."（U+002E FULL STOP）の連続は nullセルトークン。
空白の連続は何も表さない（トークンを生成しない）。
その他の文字の連続はゴミトークン。

注：これらの規則により、"1st 2nd 3rd"のように<ident>構文と一致しないセル名も生成されます。このような領域名を他プロパティから参照する場合は、エスケープが必要です（例：grid-row: \31st; で1st領域を参照）。

nullセルトークンはグリッドコンテナ内の名前なし領域を表す。
名前付きセルトークンは同名の名前付きグリッド領域を生成します。複数の名前付きセルトークンが行内外にあっても、対応する名前付きグリッド領域は1つとなり、対応するグリッドセルにまたがります。
ゴミトークンは文法エラーとなり、その宣言は無効です。

すべての文字列は、セルトークン（名前付きセルトークンやnullセルトークン）の数が同じである必要があり、最低1つ以上必要です。さもなくば宣言は無効です。名前付きグリッド領域が複数のグリッドセルにまたがる場合でも、それらが1つの矩形領域でない場合は宣言は無効です。

注：非矩形や分断領域は将来のバージョンで許可される可能性があります。

この例ではgrid-template-areasプロパティを使い、ヘッダー領域（head）、ナビゲーション領域（nav）、フッター領域（foot）、メイン領域（main）を定義しています。このテンプレートは3行2列で、4つの名前付きグリッド領域を生成します。 head領域はグリッドの両列と1行目全体にまたがります。

#grid {
  display: grid;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ...."
}
#grid > header { grid-area: head; }
#grid > nav    { grid-area: nav; }
#grid > main   { grid-area: main; }
#grid > footer { grid-area: foot; }

7.3.1. テンプレート文字列のシリアライズ

指定値または算出値として <string>型のgrid-template-areas値をシリアライズする場合、各nullセルトークンは「.」（U+002E FULL STOP）1文字として、連続するセル・トークン同士は「」(U+0020 SPACE)1文字で区切り、その他の空白はすべて省略します。

7.3.2. 暗黙的に割り当てられるライン名

grid-template-areasプロパティはテンプレート内の名前付きグリッド領域から暗黙的に割り当てられるライン名を生成します。各名前付きグリッド領域fooについて、4つの暗黙的ライン名が作られます： 2つはfoo-start（行開始・列開始）、2つはfoo-end（行終了・列終了）です。

これらの暗黙的ライン名は他のライン名と同様に動作しますが、 grid-template-rowsや grid-template-columns値には現れません。同名の明示的ライン名が定義されていても、暗黙的ライン名は同名のラインが増えるだけです。

7.3.3. 暗黙的に名付けられる領域

名前付きグリッド領域は、それが生成する暗黙的ライン名によって参照されるため、 foo-start/foo-endといった名前付きラインを明示的に追加することで、実質的に名前付きグリッド領域となります。このような暗黙的に名付けられた領域はgrid-template-areas値には現れませんが、 grid-placementプロパティからは参照可能です。

7.4. 明示的グリッドショートハンド：grid-templateプロパティ

名前:	grid-template
値:	none \| [ <'grid-template-rows'> / <'grid-template-columns'> ] \| [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
初期値:	none
適用対象:	グリッドコンテナ
継承:	個々のプロパティ参照
パーセンテージ:	個々のプロパティ参照
算出値:	個々のプロパティ参照
アニメーション型:	個々のプロパティ参照
正規順序:	文法順

grid-templateプロパティは、ショートハンドであり、grid-template-columns、grid-template-rows、grid-template-areasを一度に指定できます。複数の構文形式があります：

none

3つのプロパティ全てを初期値（none）に設定します。

<'grid-template-rows'> / <'grid-template-columns'>

grid-template-rowsとgrid-template-columnsを指定値に設定し、 grid-template-areasはnoneに設定されます。

grid-template: auto 1fr / auto 1fr auto;

は次と同等です：

grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

grid-template-areasを指定された文字列に設定します。
grid-template-rowsを各文字列後の<track-size>に設定（サイズ省略時はautoで補完）し、前後の名前付きラインも合成します。
grid-template-columnsはスラッシュ以降のトラックリストに設定（指定されていない場合はnone）。

この構文では、トラック名やサイズをグリッド領域とインラインで揃えて記述できます。

grid-template: [header-top] "a   a   a"     [header-bottom]
                 [main-top] "b   b   b" 1fr [main-bottom]
                          / auto 1fr auto;

は次と同等：

grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;

そして次のようなグリッドを生成します：

上記宣言で生成されるグリッド（「a/b-start/end」名は暗黙的ライン名で、名前付きグリッド領域によるもの）

注： repeat()関数はこれらトラックリスト内で使用不可です。トラックがASCIIアートの行・列と一対一で並ぶことが意図されているためです。

注： gridショートハンドも同じ構文を受け付けますが、暗黙グリッドのプロパティも初期値にリセットします。別々にカスケードさせたい場合以外は、gridの使用が推奨されます（grid-templateよりも）。

7.5. 暗黙的グリッド

grid-template-rows、grid-template-columns、grid-template-areasプロパティは、明示的グリッドを構成する固定数のトラックを定義します。グリッドアイテムがこれらの範囲外に配置される場合、グリッドコンテナは暗黙的グリッドトラックを生成し、暗黙的グリッドラインをグリッドに追加します。これらのラインと明示的グリッドが合わせて暗黙的グリッドを構成します。 grid-auto-rows、grid-auto-columnsプロパティは、この暗黙的グリッドトラックや grid-template-areasで作成され、 grid-template-rowsや grid-template-columnsで明示的にサイズ指定されていない明示的グリッドトラックにもサイズを指定します。

grid-auto-flowプロパティは、明示的な位置指定がないグリッドアイテムの自動配置を制御します。明示的グリッドが埋まった場合（または明示的グリッドが存在しない場合）、自動配置によって暗黙的グリッドトラックも生成されます。

grid ショートハンドプロパティは、暗黙的グリッドプロパティ（grid-auto-flow、grid-auto-rows、grid-auto-columns）を明示的グリッドプロパティと一括で設定できます。

7.6. 暗黙的トラックサイズ指定：grid-auto-rows・grid-auto-columnsプロパティ

名前:	grid-auto-columns, grid-auto-rows
値:	<track-size>+
初期値:	auto
適用対象:	グリッドコンテナ
継承:	no
パーセンテージ:	トラックサイズ指定参照
算出値:	トラックサイズ指定参照
正規順序:	文法順
アニメーション型:	リスト長が一致する場合は各アイテムごとに算出値型、そうでなければ離散型

grid-auto-columnsとgrid-auto-rowsプロパティは、 grid-template-rowsやgrid-template-columnsでサイズ指定されていないトラックのサイズを指定します。複数のトラックサイズが指定された場合は、必要に応じてパターンが繰り返され、対象トラックのサイズが決定されます。明示的サイズ指定済みトラックの直後のトラックには最初のサイズが、以降順次割り当てられます。また、暗黙的グリッドトラックのうち明示的グリッド直前のものには最後のサイズから順に逆向きで割り当てられます。

注：グリッドアイテムが grid-template-rows/grid-template-columnsやgrid-template-areasで明示的に宣言されていない行・列に配置された場合、暗黙的グリッドトラックが生成されます。これは範囲外の行・列へ明示的に配置した場合や、自動配置アルゴリズムが追加の行・列を生成した場合にも発生します。

<style>
  #grid {
    display: grid;
    grid-template-columns: 20px;
    grid-auto-columns: 40px;
    grid-template-rows: 20px;
    grid-auto-rows: 40px;
  }
  #A { grid-column: 1; grid-row: 1; }
  #B { grid-column: 2; grid-row: 1; }
  #C { grid-column: 1; grid-row: 2; }
  #D { grid-column: 2; grid-row: 2; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

2×2グリッド：最初の行・列に明示的な20px×20pxセルが1つ、そのほか暗黙的な40px列・行によって追加セル3つが生成されている。

7.7. 自動配置：grid-auto-flowプロパティ

名前:	grid-auto-flow
値:	[ row \| column ] \|\| dense
初期値:	row
適用対象:	グリッドコンテナ
継承:	no
パーセンテージ:	該当なし
算出値:	指定キーワード
正規順序:	文法順
アニメーション型:	離散型

グリッドアイテムが明示的に配置されていない場合、グリッドコンテナ内の空きスペースに自動配置アルゴリズムによって自動的に配置されます。 grid-auto-flowは、自動配置アルゴリズムの動作を制御し、自動配置アイテムがどのようにグリッドへ流し込まれるかを指定します。詳細は§ 8.5 グリッドアイテム配置アルゴリズム参照。

row: 自動配置アルゴリズムは、行ごとに順次アイテムを配置し、必要に応じて新しい行を追加します。 rowやcolumnが指定されていない場合は rowが仮定されます。
column: 自動配置アルゴリズムは、列ごとに順次アイテムを配置し、必要に応じて新しい列を追加します。
dense: 指定した場合、自動配置アルゴリズムは「dense」パッキングアルゴリズムを使い、後で出現する小さいアイテムが先の空きを埋めるようにします。これにより順序が入れ替わる場合がありますが、大きなアイテムで空いた穴を埋めることができます。
省略時は「sparse」アルゴリズムを使い、配置は常にグリッド内を「前進」し、穴埋めのために後戻りしません。これにより自動配置アイテムは全て「順序通り」に並びますが、後のアイテムで埋められる穴が残ることがあります。

注：将来のバージョンでは、自動配置アイテムを1つの「デフォルト」セルに集約する値が追加される予定です。

自動配置はグリッドアイテムをorder-modified文書順で処理します。

次の例では、3列が内容サイズで自動生成されます。行は明示的定義されていません。 grid-auto-flowはrowで、グリッドは最初の行から3列を探索し、次の行へと進み、必要に応じて行を追加して自動配置グリッドアイテムの配置スペースを確保します。

自動配置によるフォームレイアウト。

<style type="text/css">
form {
  display: grid;
  /* 3列を内容サイズで定義し、対応するラインに名前を付与する */
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  /* すべてのラベルを "labels" 列に配置し、
     自動的に次の空き行を探す */
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  /* すべてのコントロールを "controls" 列に配置し、
     自動的に次の空き行を探す */
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* このアイテムを "oversized" 列の最初の行に自動配置し、
     3行スパンする領域が他の明示的配置アイテムや先に自動配置されたアイテムと重ならないようにする */
  grid-column: oversized;
  grid-row: span 3;
}

/* フォームのすべてのボタンを
   明示的に定義されたグリッド領域に配置 */
#buttons {
  grid-row: auto;

  /* ボタン領域がインライン軸でグリッド全体をスパンするようにする */
  grid-column: 1 / -1;
  text-align: end;
}
</style>
<form>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
  <label for="address2">Address 2:</label>
  <input type="text" id="address2" name="address2">
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <label for="state">State:</label>
  <select type="text" id="state" name="state">
    <option value="WA">Washington</option>
  </select>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" name="zip">

  <div id="department-block">
    <label for="department">Department:</label>
    <select id="department" name="department" multiple>
      <option value="finance">Finance</option>
      <option value="humanresources">Human Resources</option>
      <option value="marketing">Marketing</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">Cancel</button>
    <button id="back">Back</button>
    <button id="next">Next</button>
  </div>
</form>

7.8. グリッド定義ショートハンド：gridプロパティ

名前:	grid
値:	<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
初期値:	none
適用対象:	グリッドコンテナ
継承:	個々のプロパティ参照
パーセンテージ:	個々のプロパティ参照
算出値:	個々のプロパティ参照
アニメーション型:	個々のプロパティ参照
正規順序:	文法順

grid プロパティはショートハンドであり、明示的グリッドプロパティ（grid-template-rows、grid-template-columns、grid-template-areas）、および暗黙的グリッドプロパティ（grid-auto-rows、grid-auto-columns、grid-auto-flow）を 1つの宣言で設定します。（gutterプロパティはリセットされません。）

構文はgrid-templateと一致し、さらに自動フローグリッドのための構文が追加されています：

<'grid-template'>: grid-templateのロングハンドを同様に設定し、 grid-auto-*のロングハンドは初期値にリセットされます。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>: 自動フローを設定し、片方の軸のトラックを明示的に設定（grid-template-rowsまたはgrid-template-columnsを指定し、もう片方はnoneに設定）、他軸は自動トラック繰り返し（grid-auto-rowsまたはgrid-auto-columnsを指定し、もう片方はautoにする）。grid-auto-flowも rowまたはcolumnに設定され、 denseも指定に応じて設定されます。
他のgrid サブプロパティは初期値にリセットされます。

注： 1つのgrid宣言内で、明示的または暗黙的グリッドプロパティのみ指定できます。指定しなかったサブプロパティは通常どおり初期値にリセットされます（shorthandの挙動）。

grid-templateショートハンド構文で明示的グリッドを設定できるほか、 gridショートハンドは自動フォーマットグリッドのパラメータ指定も容易です。例えば、grid: auto-flow 1fr / 100px;は次と同等です：

grid-template: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;

同様に、grid: none / auto-flow 1frは

grid-template: none;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-auto-columns: 1fr;

シリアライズ時、すべてのgrid-auto-*ロングハンドが初期値の場合、 grid-template構文が使用されます。

8. グリッドアイテムの配置

各グリッドアイテムはグリッド領域に関連付けられ、グリッドアイテムが占める隣接するグリッドセルの矩形集合です。このグリッド領域が、グリッドアイテムの包含ブロックとなり、 justify-selfやalign-selfなどのセルフアラインプロパティで実際の位置が決まります。グリッドアイテムが占めるセルは、グリッドの行・列サイズにも影響します（§ 11 グリッドレイアウトアルゴリズム参照）。

グリッドアイテムのグリッド領域の位置は、 placement（配置）によって定義されます。これはグリッド位置とグリッドスパンから構成されます：

グリッド位置: グリッドアイテムの各軸でのグリッド内位置。グリッド位置は、確定位置（明示指定）または自動位置（自動配置で決定）となります。
グリッドスパン: グリッドアイテムが各軸で占めるグリッドトラックの数。 Level 1では、グリッドアイテムのグリッドスパンは必ず確定スパンとなり、決定できない場合は各軸とも1がデフォルトとなります。

grid-placementプロパティ（ロングハンド：grid-row-start、grid-row-end、grid-column-start、grid-column-endと、ショートハンド：grid-row、grid-column、grid-area）は、著者がグリッドアイテムの配置について、次の6項目のいずれか（または全く指定しないことも可能）で指定できます：

	行	列
`開始`	row-startライン	column-startライン
`終了`	row-endライン	column-endライン
`スパン`	row span	column span

任意の2つの開始・終了・スパンの値が確定していれば、同じ軸の3つ目の値も確定します。

次の表は、グリッド位置やスパンが確定か自動かの条件をまとめたものです：

	位置	スパン
確定	少なくとも1つのラインが指定されている	明示・暗黙・デフォルトでスパンが確定
自動	明示的ライン指定なし	該当なし

8.1. グリッド配置の一般的パターン

この節は参考情報です。

grid-placementプロパティのロングハンドは、3つのショートハンドに整理されています：

grid-area
grid-column		grid-row
grid-column-start	grid-column-end	grid-row-start	grid-row-end

8.1.1. 名前付き領域

アイテムは名前付きグリッド領域（grid-template-areasで生成される領域など）に領域名をgrid-areaで指定して配置できます：

article {
  grid-area: main;
  /* アイテムを名前付き領域 "main" に配置 */
}

アイテムは名前付きグリッド領域に部分的に揃えて、他の端を別のラインに揃えることもできます：

.one {
  grid-row-start: main;
  /* 行開始端を "main" 領域の開始端に揃える */
}

8.1.2. 数値インデックスとスパン

グリッドアイテムは数値で位置やサイズ指定ができ、特にスクリプト駆動のレイアウトで便利です：

.two {
  grid-row: 2;    /* アイテムを2行目に配置 */
  grid-column: 3; /* アイテムを3列目に配置 */
  /* grid-area: 2 / 3; と同等 */
}

デフォルトではグリッドアイテムのスパンは1です。スパンを明示的に指定することもできます：

.three {
  grid-row: 2 / span 5;
  /* 2行目から開始し、
     下方向に5行分スパン（7行目で終了） */
}

.four {
  grid-row: span 5 / 7;
  /* 7行目で終了し、
     上方向に5行分スパン（2行目から開始） */
}

注：グリッドのインデックスは書字モードに依存します。例：アラビア語のような右から左の言語では、最初の列が最右端の列になります。

8.1.3. 名前付きラインとスパン

数値でラインを数える代わりに、ライン名で参照することもできます：

.five {
  grid-column: first / middle;
  /* "first"ラインから"middle"ラインまでスパン */
}

注：名前付きグリッド領域とライン名が同じ場合、配置アルゴリズムは名前付きグリッド領域のラインを優先します。

同じ名前のラインが複数ある場合は、名前付きラインのセットとして機能し、名前でフィルタしてインデックス指定できます：

.six {
  grid-row: text 5 / text 7;
  /* "text"名の5番目から7番目のライン間でスパン */
  grid-row: text 5 / span text 2;
  /* 上と同じ："text"名の5番目から開始し、
     さらに2つ先の"text"ラインまでスパン（7番目まで） */
}

8.1.4. 自動配置

グリッドアイテムは次の空きグリッドセルに自動配置でき、空きがない場合はグリッドが拡張されます。

.eight {
  grid-area: auto; /* 初期値 */
}

例えばカタログサイトでセール品一覧をグリッド状に並べる用途に使えます。

自動配置は、明示的なスパンと組み合わせてアイテムが複数セル分を占めるようにもできます：

.nine {
  grid-area: span 2 / span 3;
  /* 自動配置アイテムで2行3列分をカバー */
}

自動配置アルゴリズムが行方向に探索・追加するか列方向に探索・追加するかはgrid-auto-flowプロパティで制御します。

注：デフォルトでは自動配置アルゴリズムはグリッドを直線的に探索し、バックトラックしません。大きなアイテム配置のため空きを飛ばす場合も、後でその空きに戻って埋めません。この動作を変更するには、 denseキーワードをgrid-auto-flowで指定します。

「大いなる力には大いなる責任が伴う」

grid-placementプロパティによってコンテンツを自由にグリッド内で配置・並べ替えでき、視覚的な表示順と実際の文書ソース順が大きく乖離することも可能です。この柔軟性により、著者はデバイスや表示モードごとに最適化した描画ができます（例えばメディアクエリの活用等）。ただし正しいソース順の代替にはなりません。

正しいソース順は、音声読み上げやキーボードナビゲーションなどの逐次ナビゲーション、検索エンジンや触覚ブラウザなどCSS非対応UAにとって重要です。グリッド配置はあくまで視覚的な表示だけに影響します！著者は非CSS/非視覚的なインタラクションのために文書ソースを最適化し、グリッド配置テクニックで視覚的表示だけを操作することでソース順を維持できます。

8.3. ラインベースの配置：grid-row-start、grid-column-start、grid-row-end、grid-column-endプロパティ

名前:	grid-row-start, grid-column-start, grid-row-end, grid-column-end
値:	<grid-line>
初期値:	auto
適用対象:	グリッドアイテムおよび包含ブロックがグリッドコンテナの絶対配置ボックス
継承:	no
パーセンテージ:	該当なし
算出値:	指定されたキーワード・識別子・整数
正規順序:	文法順
アニメーション型:	離散型

<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

grid-row-start、grid-column-start、grid-row-end、grid-column-endプロパティは、グリッドアイテムのサイズ・位置をグリッド内で決定します。ライン・スパン・または何も（自動）を配置に寄与し、インライン開始、ブロック開始、インライン終了、ブロック終了端をグリッド領域で指定します。

各値の意味：

<custom-ident>

まずグリッド領域端を名前付きグリッド領域と一致させようとします：グリッドラインでライン名が <custom-ident>-start（grid-*-startの場合）/ <custom-ident>-end（grid-*-endの場合）があれば、最初に一致したラインをグリッドアイテムの配置に使います。

注：名前付きグリッド領域はこの形式の暗黙的ライン名を自動生成するため、 grid-row-start: fooと指定すると、その名前付きグリッド領域の開始端が選ばれます（ただし明示的にfoo-start名のラインが前にあればそちらが優先）。

それ以外は、整数1を指定したのと同じ扱いになります。

[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?

N番目のグリッドラインをグリッドアイテムの配置に寄与します。負の整数指定の場合は終端側から逆方向に数えます（明示的グリッドの終端から）。

名前付きの場合はその名前のラインだけを数えます。十分な個数がなければ、暗黙的グリッドラインもその名前として探索対象になります。

<integer> 値が0なら宣言は無効です。

span && [ <integer [1,∞]> || <custom-ident> ]

グリッドスパンをグリッドアイテムの配置に寄与し、対応する端が反対側からNライン分離れた位置となります。例：grid-column-end: span 2は、開始ラインから終端方向に2つ目のグリッドライン。

名前付きの場合はその名前のラインだけを数えます。十分な個数がなければ、該当方向の暗黙的グリッドラインもその名前として探索対象になります。

例：次の宣言の場合

.grid { grid-template-columns: 100px; }
.griditem { grid-column: span foo / 4; }

グリッドコンテナには2本のグリッドライン（1,2）がある明示的グリッドがあります。グリッドアイテムのcolumn-endは4ライン指定なので、終端側に2本の暗黙的グリッドラインが生成されます。

column-start端はその手前で最初に見つかる"foo"ラインでなければなりません。グリッド内には"foo"ラインがないため、暗黙的グリッドのみが候補です。 3番目のラインは終端側なので該当せず、span指定により始端側で新規"foo"ラインが生成されます。

この結果のイラスト

整数省略時は1がデフォルト。負数やゼロは無効です。

auto

プロパティはグリッドアイテムの配置に何も寄与せず、自動配置またはデフォルトスパン1を示します。（§ 8 グリッドアイテムの配置参照）

上記すべての産出規則で、 <custom-ident>はキーワードspanとautoを除外します。

1行8列のグリッドで9個の名前付きラインがある場合：

1  2  3  4  5  6  7  8  9
+--+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |  |
A  B  C  A  B  C  A  B  C
|  |  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+--+

次の宣言は指定インデックスのライン間にアイテムを配置：

grid-column-start: 4; grid-column-end: auto;
/* ライン4からライン5 */

grid-column-start: auto; grid-column-end: 6;
/* ライン5からライン6 */

grid-column-start: C; grid-column-end: C -1;
/* ライン3からライン9 */

grid-column-start: C; grid-column-end: span C;
/* ライン3からライン6 */

grid-column-start: span C; grid-column-end: C -1;
/* ライン6からライン9 */

grid-column-start: span C; grid-column-end: span C;
/* エラー: end側のspanは無視され、自動配置
   アイテムは名前付きラインまでスパンできない。
   ''grid-column: span 1;''と同等 */

grid-column-start: 5; grid-column-end: C -1;
/* ライン5からライン9 */

grid-column-start: 5; grid-column-end: span C;
/* ライン5からライン6 */

grid-column-start: 8; grid-column-end: 8;
/* エラー: ライン8からライン9 */

grid-column-start: B 2; grid-column-end: span 1;
/* ライン5からライン6 */

8.3.1. グリッド配置の衝突処理

配置がグリッドアイテムに対して2本のラインを含む場合、開始ラインが終了ラインよりも終端側にある場合は、 2本のラインを入れ替えます。開始ラインが終了ラインと等しい場合は、終了ラインを削除します。

配置が2つのスパンを含む場合は、終了側のgrid-placementプロパティが寄与したスパンを削除します。

配置が名前付きラインへのスパンのみの場合は、スパン1に置き換えます。

8.4. 配置ショートハンド：grid-column、grid-row、grid-areaプロパティ

名前:	grid-row, grid-column
値:	<grid-line> [ / <grid-line> ]?
初期値:	auto
適用対象:	グリッドアイテムおよび包含ブロックがグリッドコンテナの絶対配置ボックス
継承:	no
パーセンテージ:	該当なし
算出値:	個々のプロパティ参照
アニメーション型:	離散型
正規順序:	文法順

grid-rowとgrid-columnプロパティはそれぞれgrid-row-start/grid-row-endや grid-column-start/grid-column-endのショートハンドです。

2つの<grid-line>値が指定された場合、 grid-row-start/grid-column-startロングハンドはスラッシュ前の値に設定され、 grid-row-end/grid-column-endロングハンドはスラッシュ後の値に設定されます。

2つ目の値が省略された場合、 1つ目が<custom-ident>なら、 grid-row-end/grid-column-endロングハンドもその<custom-ident>に設定されます。それ以外の場合はautoに設定されます。

名前:	grid-area
値:	<grid-line> [ / <grid-line> ]{0,3}
初期値:	auto
適用対象:	グリッドアイテムおよび包含ブロックがグリッドコンテナの絶対配置ボックス
継承:	no
パーセンテージ:	該当なし
算出値:	個々のプロパティ参照
アニメーション型:	離散型
正規順序:	文法順

grid-areaプロパティはショートハンドであり、 grid-row-start、 grid-column-start、 grid-row-end、 grid-column-end を一度に設定できます。

4つの<grid-line>値が指定された場合、 grid-row-startは1つ目、 grid-column-startは2つ目、 grid-row-endは3つ目、 grid-column-endは4つ目に設定されます。

grid-column-endが省略された場合、 grid-column-startが<custom-ident>なら、grid-column-endもその<custom-ident>に設定されます。それ以外はautoになります。

grid-row-endが省略された場合、 grid-row-startが<custom-ident>なら、grid-row-endもその<custom-ident>に設定されます。それ以外はautoになります。

grid-column-startが省略された場合、 grid-row-startが<custom-ident>なら、 4つのロングハンドすべてがその値に設定されます。それ以外はautoになります。

注：このショートハンドの解決順はrow-start/column-start/row-end/column-endで、 LTRページではCCW、 marginなど物理方向の関連4辺プロパティとは逆方向です。

8.5. グリッドアイテム配置アルゴリズム

次のグリッドアイテム配置アルゴリズムは、自動位置のグリッドアイテムを確定位置へと解決し、すべてのグリッドアイテムがレイアウト用の明確なグリッド領域を持つようにします。（グリッドスパンは特別な解決不要で、明示指定されない場合は1がデフォルトです。）

注：このアルゴリズムにより、暗黙的グリッドに新しい行や列が作られる場合があります。明示的グリッド内に自動配置グリッドアイテムを配置できる余地がない場合です。

すべてのグリッドセル（明示的および暗黙的グリッド両方）は占有または非占有になり得ます。セルがグリッド領域でグリッドアイテム（確定位置）に被覆されていれば占有です。それ以外は非占有です。アルゴリズム中、セルの占有/非占有状態は変化しうる。

説明の明瞭さのため、このアルゴリズムはgrid-auto-flowがrowであると仮定して記述。 columnの場合は、行・列やインライン・ブロックの記述を入れ替えて読んでください。

注：自動配置アルゴリズムはグリッドアイテムを order-modified文書順で処理します（元の文書順ではない）。

匿名グリッドアイテムを生成：§ 6 グリッドアイテム参照。（匿名グリッドアイテムは常に自動配置され、boxにはgrid-placementプロパティは指定できません。）
自動配置でないものの位置を決定。
特定の行に固定されたアイテムを処理。

grid-row-start・grid-row-endで確定位置のあるグリッドアイテムを order-modified文書順に従って：

「sparse」パッキング（デフォルト）

配置のcolumn-startラインを、そのアイテムのグリッド領域が既存の占有グリッドセルに重ならず、このステップで既に配置済みの同じ行アイテム以降となる最小の正インデックスラインに設定。

「dense」パッキング（dense指定時）

配置のcolumn-startラインを、そのアイテムのグリッド領域が既存の占有グリッドセルに重ならない最小の正インデックスラインに設定。
暗黙的グリッドの列を決定。

暗黙的グリッド内で列を生成：
1. 明示的グリッドの列から開始。
2. 確定列位置のある（明示配置アイテム、前ステップで配置済みアイテム、未配置だが確定列ありアイテム）のうち必要に応じて暗黙グリッド先頭・末尾に列を追加。
3. 確定列位置なしアイテムのうち最大の列スパンが暗黙的グリッドの幅より大きければ、その列スパン分だけ末尾に列を追加。
例：次のスタイル断片
```
#grid {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-auto-flow: row;
}
#grid-item {
  grid-column: 4 / span 3;
}
```
必要な列数は6。明示的グリッドは5列（grid-template-columnsより）で、ラインは1〜6だが、#grid-itemのcolumn位置はライン7で終わるため、暗黙的グリッド末尾にさらに1列追加が必要。
残りのグリッドアイテムを配置。

自動配置カーソルは現在のグリッド「挿入位置」を示し、行・列のグリッドラインのペアで示されます。初期状態では自動配置カーソルは暗黙的グリッドの最初の行・列ラインに設定。

配置方法はgrid-auto-flow値による：
「sparse」パッキング（デフォルト）
前ステップで未配置のグリッドアイテムを order-modified文書順で：
アイテムが確定列位置あり
カーソルの列位置を、グリッドアイテムのcolumn-startラインに設定する。もしこれが、カーソルの前回の列位置より小さい場合は、行位置を1増加させる。

カーソルの行位置をインクリメントし、グリッドアイテムがどの占有済みグリッドセルとも重ならない値が見つかるまで繰り返す（必要に応じて暗黙グリッドに新しい行を作成する）。

アイテムのrow-startラインをカーソルの行位置に設定し、そこからのスパンに従ってrow-endラインを設定する。
アイテムが両軸とも自動位置の場合
自動配置カーソルの列位置を、アイテムのグリッド領域が占有セルに重ならない、またはカーソル列位置＋アイテムの列スパンがアルゴリズムで決定された暗黙的グリッド列数を超えるまで増やす。

前ステップで重ならない位置が見つかれば、アイテムのrow-start・column-startラインをカーソル位置に設定。見つからなければ、自動配置カーソルの行位置を1増やし（必要なら暗黙的グリッドに新しい行を追加）、列位置を暗黙的グリッド最初の列ラインに戻し、前のステップに戻る。
「dense」パッキング（dense指定時）
前ステップで未配置のグリッドアイテムを order-modified文書順で：
アイテムが確定列位置あり
カーソルの行位置を暗黙グリッドの最も開始側の行ラインに設定する。カーソルの列位置をグリッドアイテムのcolumn-startラインに設定する。

自動配置カーソルの行位置をインクリメントし、グリッドアイテムがどの占有済みグリッドセルとも重ならない値が見つかるまで繰り返す（必要に応じて暗黙グリッドに新しい行を作成する）。

アイテムのrow-startラインのインデックスをカーソルの行位置に設定する。（アイテムのrow-endラインも、そのスパンに従い暗黙的に設定される。）
アイテムが両軸とも自動位置の場合
カーソルの行・列位置を暗黙的グリッド最初の行・列ラインに設定。

カーソルの列位置を、アイテムのグリッド領域が占有セルに重ならない、またはカーソル列位置＋アイテムの列スパンがアルゴリズムで決定された暗黙的グリッド列数を超えるまで増やす。

前ステップで重ならない位置が見つかれば、アイテムのrow-start・column-startラインをカーソル位置に設定。見つからなければ、カーソルの行位置を1増やし（必要なら暗黙的グリッドに新しい行追加）、列位置を暗黙的グリッド最初の列ラインにリセットし、前のステップに戻る。

9. 絶対位置指定

9.1. グリッドコンテナが包含ブロックの場合

絶対位置指定要素の包含ブロックがグリッドコンテナによって生成される場合、包含ブロックはそのグリッド領域（grid-placementプロパティで決定）に対応します。オフセットプロパティ（top/right/bottom/left) は、通常通りこの包含ブロックの対応する端から内側へのオフセットを示します。

注：絶対位置指定要素をグリッドコンテナに絶対配置することで、そのコンテナのグリッドラインに揃えることはできますが、こうした要素はグリッドのレイアウトやスペース確保には一切関与しません。

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* グリッドコンテナを縦方向に4等分（4行）、横方向は各10rem（4列） */
  justify-content: center;
  /* グリッドコンテナ内でグリッドを中央配置 */
  position: relative;
  /* 絶対位置指定用の包含ブロックを確立 */
}

.abspos {
  grid-row-start: 1;     /* 1行目のグリッドライン＝グリッドコンテナの上端 */
  grid-row-end: span 2;  /* 3行目のグリッドライン */
  grid-column-start: 3;  /* 3列目のグリッドライン */
  grid-column-end: auto; /* 右のパディング端 */
  /* 包含ブロックはグリッドコンテナの右上象限 */

  position: absolute;
  top: 70px;
  bottom: 40px;
  left: 100px;
  right: 30px;
}

注：グリッドおよびgrid-placementプロパティはフロー相対ですが、オフセットプロパティ（left, right, top, bottom)は物理方向なので、directionやwriting-modeプロパティが変わるとグリッドは変形しますが、オフセットはそのままです。

自動配置ではなく、auto値がgrid-placementプロパティに指定された場合は、配置に特別なラインが寄与され、その位置は該当軸のグリッドコンテナのパディング端（スクロール可能領域のパディング端、グリッドコンテナがオーバーフローしている場合）です。これらのラインは、絶対位置指定アイテムの配置に用いる補強グリッドの最初と最後のライン（0番目と-0番目）となります。

注：デフォルトでは、絶対位置指定ボックスの包含ブロックはグリッドコンテナのパディング端に対応し、ブロックコンテナの場合と同様です。

絶対位置指定はグリッドやそのフロー内内容のレイアウト後に行われ、グリッドトラックのサイズ決定やグリッド自体のサイズ・構成には一切影響しません。 grid-placementプロパティが存在しないラインを参照した場合（明示的指定や既存暗黙的グリッド外にスパンした場合）、それはauto指定とみなされ（新しい暗黙的グリッドラインは生成されません）。

注：暗黙的ラインはすべてのライン名を持つと仮定されるため、参照したラインが明示的名はなくとも存在する場合があります。

配置が名前付きラインへのスパンのみの場合は、その軸の2つのautoラインに置き換えます。（これは両軸のgrid-placementプロパティが元々スパンを寄与し、§ 8.3.1 グリッド配置の衝突処理で2つ目のスパンが無視された場合に起こります。）

9.2. グリッドコンテナが親の場合

グリッドコンテナの絶対位置指定子要素はフロー外でありグリッドアイテムではありません。したがって他のアイテムの配置やグリッドサイズには影響しません。

静的位置は[CSS2]に従い、グリッドコンテナの絶対位置指定子要素は、その要素のみがグリッドコンテナの内容端に一致するグリッド領域に配置されるかのように決定されます。

注：この位置は子要素のjustify-selfやalign-selfの値に影響され、他の多くのレイアウトモデル同様、絶対位置指定子は包含ブロックのサイズや内容のレイアウトには影響しません。

10. 整列とスペース

グリッドコンテナのグリッドトラックのサイズ決定と、すべてのグリッドアイテムの寸法が確定した後、グリッドアイテムはそれぞれのグリッド領域内で整列できます。

marginプロパティは、ブロックレイアウトでのマージンのようにアイテムを整列できます。グリッドアイテムもボックス整列プロパティ（CSS Box Alignment Module [CSS-ALIGN-3]）に従い、キーワードベースで行・列両方の整列が容易にできます。

デフォルトでは、グリッドアイテムはグリッド領域を埋めるように伸縮します。ただしjustify-selfやalign-selfが stretch以外に算出されるか、marginがautoの場合は、グリッドアイテムは内容サイズに合わせて自動サイズされます。

10.1. ガター：row-gap・column-gap・gap プロパティ

row-gap・column-gap （およびgapショートハンド）は、グリッドコンテナ上で指定するとガター（グリッド行・グリッド列間）を定義します。構文はCSS Box Alignment 3 § 8 Gaps Between Boxes参照。

これらプロパティの効果は、対象グリッドラインに厚みが付いたかのようになります： 2本のグリッドライン間のグリッドトラックは、その両端のガター間のスペースです。トラックサイズ決定の目的では、各ガターは指定サイズの空の固定トラックとして扱われ、そのガターにまたがるグリッドラインをスパンするグリッドアイテムはそのトラックもスパンします。

注： justify-contentやalign-contentによる追加スペースもトラック間に加算される場合があります。 § 11.1 Grid Sizing Algorithm参照。このスペースは実質的にガターのサイズを増やします。

グリッドがフラグメントされてトラック間で分割される場合、該当トラック間のガタースペースは抑制されます。ガターは強制改ページ後も抑制されます（marginとは異なる）。

ガターは 暗黙的グリッドのトラック間だけに現れます。最初のトラック前や最後のトラック後にはガターはありません。（特に、暗黙的グリッドの最初・最後のトラックと補強グリッドの「auto」ラインの間にも、ガターはありません。）

折り畳みトラックのガターが折り畳みされる場合、両方のガターが完全に重なり、端が一致します。折り畳みトラックの片側にガターがない場合（例：暗黙的グリッドの最初・最後のトラックなど）、ガター折り畳みの結果、両側ともガターがなくなります。

10.2. autoマージンによる整列

グリッドアイテムのautoマージンは、ブロックレイアウトでのautoマージンとほぼ同じ効果があります：

グリッドトラックサイズ計算中はautoマージンは0として扱われます。
インライン軸のブロックレイアウト（CSS2§10.3.3参照）では、各軸のautoマージンは整列前に正の空きスペースを吸収し、該当軸のセルフ整列プロパティの効果を無効化します。
はみ出すグリッドアイテムはautoマージンを0として解決し、ボックス整列プロパティに従ってはみ出します。

10.3. インライン軸の整列：justify-self・justify-itemsプロパティ

グリッドアイテムはインライン方向（横方向）で justify-selfプロパティ（グリッドアイテム側）や justify-itemsプロパティ（グリッドコンテナ側）で整列可能です（[CSS-ALIGN-3]参照）。

例：英語文書の場合、インライン軸は横方向なので、justify-*プロパティでグリッドアイテムを横方向に整列できます。

ベースライン整列が、該当軸で内在サイズトラック（アイテムサイズとベースライン整列が循環依存する）に依存するグリッドアイテムに指定された場合、そのアイテムはベースライン整列に参加せず、フォールバック整列を最初から指定されたように使う。この目的では、<flex>トラックサイズは、グリッドコンテナの該当軸サイズが未確定の場合「内在サイズ」とみなされます。

注：フォールバック整列の使用有無はレイアウト中に変化しません。循環があれば最初から循環です。

10.4. ブロック軸の整列：align-self・align-itemsプロパティ

グリッドアイテムはブロック方向（インライン軸直交方向）でも align-self プロパティ（グリッドアイテム側）や align-itemsプロパティ（グリッドコンテナ側）で整列可能です（[CSS-ALIGN-3]参照）。

10.5. グリッド全体の整列：justify-content・align-contentプロパティ

グリッドの外端がグリッドコンテナの内容端と一致しない場合（例：列がflexサイズでないなど）、グリッドトラックは、グリッドコンテナの内容ボックス内で justify-content・align-contentプロパティに従って整列されます。

例：次のグリッドは垂直方向中央、右端揃えになっています：

.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
  min-height: 60rem;
}

グリッドトラックがない場合（明示的グリッドが空で、暗黙的グリッドでもトラックが生成されていない場合）、各軸の唯一のグリッドラインは、グリッドコンテナの開始端に揃えられます。

なお、justify-contentやalign-contentの特定値は（space-around・space-between・space-evenly）でトラック間に空きを設けたり、（stretch）でトラックを拡張したりできます。グリッドがグリッドでフラグメントされている場合、こうした追加スペースは抑制されます。

例：次のグリッドでは、スパンアイテムのグリッド領域が整列によるガター拡張分だけ大きくなります：

.wrapper {
  display: grid;
  /* 3行4列のグリッドコンテナ */
  grid: repeat(3, auto) / repeat(4, auto);
  gap: 10px;
  align-content: space-around;
  justify-content: space-between;
}

.item1 { grid-column: 1 / 5; }
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
/* 残り2アイテムは最後の2セルに自動配置 */

Grid with 10px gap and an element spanning all columns.
The sum of the columns is less than the width of the grid container. — 整列前のグリッド

Same grid with increased gaps absorbing the excess grid container width.
The spanning element has grown to accommodate the extra space assigned to the gap it crosses. — 整列後のグリッド

整列（gapスペースとは異なり）はグリッドトラックのサイズ決定後に発生するため、スパンアイテムの内容でトラックサイズが決まる場合は、整列段階で余ったスペース分だけアイテムが広がります。

10.6. グリッドコンテナのベースライン

グリッドコンテナの最初（最後）のベースラインは以下の手順で決定されます：

グリッドコンテナ内で少なくとも1つグリッドアイテムを含む最初（最後）の行を見つけます。
この行に交差するグリッドアイテムのいずれかがその行でベースライン整列に参加している場合、グリッドコンテナのベースラインセットは、それらグリッドアイテムの共有整列ベースラインから生成されます。

それ以外の場合は、グリッドコンテナの最初（最後）のベースラインセットは行メジャーなグリッド順（writing-modeに従う）で最初（最後）のグリッドアイテムの整列ベースラインから生成されます。そのグリッドアイテムがグリッドのインライン軸で整列ベースラインを持たない場合、境界線端から合成されます。
グリッドコンテナにグリッドアイテムが1つもない場合は、グリッドコンテナには最初（最後）のベースラインセットがありません。必要に応じて合成されます（整列コンテキストの規則に従う）。このアルゴリズムを終了します。

グリッド修正文書順（grid order）は、グリッドアイテムがグリッドのグリッドセルを走査する際に出現する順です。同時に複数アイテムが出現した場合は、 order-modified文書順で取ります。

上記規則でベースラインを計算する際、ベースラインを寄与するboxがスクロール可能なoverflow値を持つ場合、ベースライン決定の目的では初期スクロール位置として扱われます。

表セルのベースライン決定の際、グリッドコンテナはline boxやtable-row同様にベースラインを提供します。[CSS2]

ベースラインに関する詳細は CSS Writing Modes 3 § 4.1 ベースライン入門や CSS Box Alignment 3 § 9 ベースライン整列詳細を参照してください。

11. グリッドレイアウトアルゴリズム

このセクションではグリッドレイアウトアルゴリズムを定義します。これはグリッドコンテナのサイズを決定し、すべてのグリッドトラックのサイズと位置を決定し、配置済みのアイテムをグリッド領域にレイアウトします。

グリッドアイテム配置アルゴリズムを実行し、グリッド内のすべてのグリッドアイテムの配置を解決します。
グリッドコンテナのサイズを § 5.2 グリッドコンテナのサイズ決定に従って決定します。

注：このフェーズでは、トラックサイズの循環する<percentage>はautoとして扱います。
得られたグリッドコンテナサイズに対してグリッドサイズ決定アルゴリズムを実行し、グリッドのサイズを決定します。

注：このフェーズでは、トラックサイズの<percentage>はグリッドコンテナサイズで解決されます。
各グリッドアイテムをそれぞれの包含ブロックにレイアウトします。各グリッド領域の幅と高さは、この目的において確定とみなされます。

注：この段階で計算される式はすべて確定サイズのみを使うため、ストレッチフィット式なども確定となり、ストレッチされたグリッドアイテムのサイズも確定値扱いとなります。

11.1. グリッドサイズ決定アルゴリズム

このセクションではグリッドサイズ決定アルゴリズムを定義します。これはすべてのグリッドトラック、ひいてはグリッド全体のサイズを決定します。

各トラックには最小および最大のサイズ指定関数（両方同じ場合も）が指定されます。各サイズ指定関数は次のいずれかです：

固定サイズ指定関数（<length>または解決可能な<percentage>）
内在サイズ指定関数（min-content、max-content、auto、fit-content()）
柔軟サイズ指定関数（<flex>）

グリッドサイズ決定アルゴリズムはこれらのサイズ制約を実際のトラックサイズに解決する手順を定義します。

まずトラックサイズ決定アルゴリズムを使い、グリッド列のサイズを決定します。
このステップでグリッドアイテムのレイアウトが利用可能スペース（ブロック軸）に依存する場合は、すべての行が無限で、確定サイズの最大トラックサイズ指定関数を持つ行はそのサイズと仮定し、その時点でのスペースを仮定します。グリッドコンテナ・すべてのトラックが確定サイズなら、 align-contentも適用し、ギャップの最終有効サイズも考慮します。そうでなければトラック整列効果は仮定しません。
より正確な初期推定を試みるヒューリスティックを導入するべきか？例：利用可能スペースを次の最大値で仮定する：
- アイテムがスパンするすべての確定トラックサイズの合計（min/max両方が確定なら最大値、fit-content()ならその引数）
- アイテムがスパンするトラックにmin-contentやfit-content()があればアイテムのmin-contentサイズ
- アイテムがスパンするトラックにautoのminサイズ指定があればアイテムの自動最小サイズ
- アイテムがスパンするトラックにmax-contentのminサイズ指定や max-content、 auto、 <flex>のmaxサイズ指定があれば無限大
これにより再レイアウト回数が減る可能性があるが、結果の違いや有益性はあるか？仕様に採用すべきか？
次にトラックサイズ決定アルゴリズムでグリッド行のサイズを決定します。
各アイテムのブロック軸サイズ寄与に必要なインライン軸利用可能スペースは前ステップで計算したグリッド列サイズを使います。グリッドコンテナのインラインサイズが確定なら justify-contentも適用し、列ギャップサイズも考慮します。
次に、行サイズと整列（ステップ2）でアイテムのmin-content寄与が変化した場合、新たなmin-contentや max-content寄与でグリッド列サイズを再解決します（1回のみ）。
インライン軸サイズ寄与に必要なブロック軸利用可能スペースは前ステップで計算したグリッド行サイズを使います。グリッドコンテナのブロックサイズが確定なら align-contentも適用し、行ギャップサイズも考慮します。

この繰り返しは、インラインサイズがグリッドアイテムのブロックサイズに依存する場合必要です。例：カラムラップのflexコンテナ（flex-flow: column wrap）、直交フロー（writing-mode）、多段組コンテナ、行サイズ次第でサイズが変わるアスペクト比アイテム（または子要素がアスペクト比を持つ場合）など。
次に、カラムサイズと整列（ステップ3）でアイテムのmin-content寄与が変化した場合、新たなmin-contentや max-content寄与でグリッド行サイズを再解決します（1回のみ）。
ブロック軸サイズ寄与に必要なインライン軸利用可能スペースは前ステップで計算したグリッド列サイズを使います。グリッドコンテナのインラインサイズが確定なら justify-contentも適用し、列ギャップサイズも考慮します。
最後に、グリッドコンテナ内で align-content・justify-contentプロパティに従ってトラックを整列します。
注：この処理でトラック間に余分なスペースが入り、ギャップをまたぐグリッドアイテムの領域がトラックサイズ決定時より広がる場合があります。

11.2. トラックサイズ関連用語

最小トラックサイズ指定関数

トラックがminmax()でサイズ指定された場合は、最初の引数。 <flex>値やfit-content()でサイズ指定ならauto。それ以外はそのトラックのサイズ指定関数。

最大トラックサイズ指定関数

トラックがminmax()でサイズ指定された場合は、2番目の引数。それ以外はそのトラックのサイズ指定関数。すべての場合で、autoやfit-content()はmax-contentとして扱う（fit-content()除外指定ある場合を除く）。

利用可能グリッドスペース

各次元ごとに独立して、利用可能グリッドスペースは以下：

グリッドコンテナのサイズが確定なら、内容ボックスのサイズを使う。
グリッドコンテナが min-content制約やmax-content制約下なら、その利用可能グリッドスペースが制約となり（未確定値）

注： autoサイズで内容ベースのサイズ指定（例：横書きブロックレベルboxの高さ）は max-contentと同等。

いずれの場合も、グリッドコンテナのmin/max-width/heightプロパティが確定なら利用可能グリッドスペースをその値でクランプする。

余剰スペース

利用可能グリッドスペースからすべてのグリッドトラック（ガター含む）の基準サイズ総和を引いた値（0で切り捨て）。利用可能グリッドスペースが未確定なら、余剰スペースも未確定となる。

スパン数

該当次元でグリッドアイテムがまたぐグリッドトラックの数。

注：ガターは固定サイズトラックとして扱われます（min/max両サイズ指定関数がガターの使用値）。その幅もトラックサイズ決定アルゴリズムの計算に含める必要があります。

11.3. トラックサイズ決定アルゴリズム

このセクションの残りはトラックサイズ決定アルゴリズムです。最小・最大トラックサイズ指定関数から使用トラックサイズを計算します。各トラックは基準サイズ（<length>）を持ち、アルゴリズム中に増加し最終的にトラックのサイズとなります。また成長限界（<length>）を持ち、基準サイズの最大希望値となります。手順は5段階です：

トラックサイズ初期化
内在トラックサイズ解決
トラック最大化
柔軟トラック拡張
stretchなautoトラック拡張

11.4. トラックサイズ初期化

各トラックの基準サイズ・成長限界を初期化する。 各トラックについて、その最小トラックサイズ指定関数が：

固定サイズ指定関数: 絶対長に解決し、それをトラックの初期基準サイズにする。
注：未確定長は発生せず、それらはautoとして扱われます。
内在サイズ指定関数: 初期基準サイズは0とします。

各トラックについて、その最大トラックサイズ指定関数が：

固定サイズ指定関数: 絶対長に解決し、それをトラックの初期成長限界にする。
内在サイズ指定関数
柔軟サイズ指定関数: 初期成長限界は無限大とする。

すべての場合で、成長限界が基準サイズより小さい場合は、成長限界を基準サイズと同じに引き上げる。

注：ガターはトラックサイズ決定アルゴリズム上は空の固定サイズトラックとして扱われます。

11.5. 内在トラックサイズ解決

このステップでは内在トラックサイズ指定関数を絶対長に解決します。まず1トラック内に収まるアイテムでサイズを決め、次に複数トラックをまたぐアイテムのスペース要求を段階的に加算し、可能な限り均等に追加スペースを分配します。

注：このステップ完了時点ですべての内在基準サイズおよび成長限界は絶対長に解決されています。

注：注意： fit-content()やautoの最大トラックサイズ指定関数は明示指定除きmax-contentと同様に扱われます。

ベースライン整列アイテムのshim処理：各ベースライン共有グループ内のアイテムについて、各アイテムの開始/終了側（first/last-baseline整列）に「shim」（追加margin相当）を加算し、開始/終了整列時に指定通りベースラインが揃うようにする。
以下のトラックサイズ決定のため、これら「shim」も内在サイズ寄与に含める。複数内在サイズ寄与を持つアイテムは寄与ごとにshimも異なる場合がある。

例：グリッドコンテナサイズが未確定の場合、まずmin/max-content制約下でサイズ決定し、実際のサイズで再レイアウト（percentageトラック等に影響）。各フェーズのshimは独立し、そのフェーズでのみ反映される。

注：ベースライン自身整列・ベースライン内容整列アイテム両方考慮。

注：自身のサイズが内在サイズトラック依存のグリッドアイテムはベースライン整列に参加しないためshimは加算しません。
非スパンアイテムでトラックサイズ決定： 各トラックで内在サイズ指定関数かつ柔軟サイズ指定関数でないものについて、スパン1アイテムを：

min-content最小時：
トラックがmin-contentな最小トラックサイズ指定関数の場合、アイテムのmin-content寄与最大値で基準サイズを設定（0以上）。
max-content最小時：
トラックがmax-contentな最小トラックサイズ指定関数の場合、アイテムのmax-content寄与最大値で基準サイズを設定（0以上）。
auto最小時：
トラックがautoな最小トラックサイズ指定関数で、グリッドコンテナが min-/max-content制約でサイズ決定中の場合、アイテムの限定min-content寄与最大値で基準サイズを設定（0以上）。限定min-/max-content寄与は（この目的では）アイテムのmin-/max-content寄与（用途に応じて）であり、最大トラックサイズ指定関数（fit-content()ならその引数）が固定ならそれで制限し、最終的には最小寄与で下限判定。
それ以外は、アイテムの最小寄与最大値で基準サイズを設定（0以上）。最小寄与はアイテムの最小外側サイズで、具体的には、アイテムの算出希望サイズがautoとして振る舞うか、該当軸で包含ブロックサイズに依存する場合は、使用最小サイズを希望サイズと仮定した際の外側サイズ。そうでなければアイテムの最小寄与は min-content寄与となる。最小寄与は多くの場合アイテム内容サイズ依存なので内在サイズ寄与の一種とみなす。

注： auto（初期値）で最小サイズ指定されたアイテムの最小寄与は通常min-content寄与と同等ですが、場合により異なる（§ 6.6 グリッドアイテムの自動最小サイズ参照）。また、最小寄与 ≤ min-content寄与 ≤ max-content寄与。

min-content最大時：
トラックがmin-contentな最大トラックサイズ指定関数の場合、アイテムのmin-content寄与最大値で成長限界を設定。
max-content最大時：
トラックがmax-contentな最大トラックサイズ指定関数の場合、アイテムのmax-content寄与最大値で成長限界を設定。 fit-content()最大時は、この成長限界をfit-content()引数でクランプする。

すべての場合で、トラックの成長限界が基準サイズより小さい場合は、成長限界を基準サイズに引き上げる。

注：この手順は後述のスパンアイテム処理の簡易版であり、スパン1アイテムについては同じ動作となります。
内容サイズトラックをまたぐスパンアイテム対応： 次に、スパン2（かつ柔軟サイズ指定関数ではないトラックをまたぐ）アイテムについて：
1. 内在最小時： まず内在な最小トラックサイズ指定関数のトラックの基準サイズへ追加スペースを分配し、アイテムの最小寄与を満たすようにする。
  グリッドコンテナがmin-やmax-content制約下の場合はアイテムの限定min-content寄与を使う。（複数トラックスパン時は、固定最大トラックサイズ指定関数の合計値で上限判定。）
2. 内容ベース最小時： 次に、min-contentやmax-contentな最小トラックサイズ指定関数のトラックの基準サイズにアイテムのmin-content寄与を満たすよう追加スペースを分配。
3. max-content最小時： 次に、グリッドコンテナがmax-content制約でサイズ決定中の場合は、 autoやmax-contentな最小トラックサイズ指定関数のトラックの基準サイズへアイテムの限定max-content寄与分追加スペース分配。
  すべての場合で max-contentな最小トラックサイズ指定関数のトラックの基準サイズにアイテムのmax-content寄与分追加スペース分配。
4. この時点でトラックの成長限界が基準サイズより小さければ、成長限界を基準サイズに引き上げる。
5. 内在最大時： 次に、内在な最大トラックサイズ指定関数のトラックの成長限界にアイテムのmin-content寄与分追加スペース分配。このステップで成長限界が無限大から有限値に変化したトラックは次ステップで無限成長可能としてマーク。
  なぜinfinitely growableフラグが存在するのか？
  
  Peter Salasの説明：
```
次のケースを考える：

2つの "auto" トラック（minmax(min-content, max-content) minmax(min-content, max-content)）。
アイテム1はトラック1（min-content=max-content=10）。
アイテム2はトラック1・2にまたがり（min-content=30, max-content=100）。

まずアイテム1を解決すると：

track 1: 基準サイズ = 10 成長限界 = 10
track 2: 基準サイズ = 0 成長限界 = 無限大

次にアイテム2を解決：

フェーズ1でtrack 2の基準サイズを20（2トラック合計で30）。
フェーズ2は該当なし。
フェーズ3でtrack 2の成長限界も20（2トラック合計で30）。
フェーズ4で成長限界合計を70増やしアイテム2対応。
方法は2つ：

1. 両トラック均等に成長限界を増やす→[45, 55]
2. track 2だけ増やす→[10, 90]

直前に設定した成長限界を分配制約としない（無限扱い）ことで
2.の結果になり、track 1はアイテム1ぴったりサイズとなる。
```
6. max-content最大時： 最後に、max-contentな最大トラックサイズ指定関数のトラックの成長限界にアイテムのmax-content寄与分追加スペース分配。
スパンの大きいアイテムについても、段階的に繰り返してすべて考慮する。
柔軟トラックをまたぐスパンアイテム対応： 次に、前ステップを繰り返すが対象は（スパンサイズごとでなく）柔軟トラックをスパンするアイテム全て。
- 分配は柔軟トラックのみに限定（他トラックは固定サイズ指定関数扱い）
- アイテムがスパンする柔軟トラックの柔軟サイズ指定関数合計が1以上なら、その比率で分配。合計が1未満ならその比率分だけ分配、残りは均等分配。
まだ無限大の成長限界を持つトラック（アイテム未配置・柔軟トラックなど）は、成長限界を基準サイズに設定する。

注：アイテムが複数トラックをまたぐ場合、内在サイズ制約を満たす単一の方法はありません。このアルゴリズムは実例で良好な結果を出すヒューリスティックを含み、仕様の「game」例等現実のケースで有効でした。今後さらに高度なヒューリスティックが判明すればアップデートされる可能性があります。

11.5.1. スパンしたトラックへの余剰スペースの分配

余剰スペースを分配するには、以下のステップを、次の入力値で実行します：

基準サイズか成長限界のどちらに影響するか（影響サイズ）。
どのトラックに影響するか（影響トラック）。
どのグリッドアイテムがスパンするトラックの、どの内在サイズ寄与（サイズ寄与）か。

各影響トラックごとに予定増分を0で管理する。（これにより増分が順序依存になるのを防ぐ。）
各対応アイテムitemについて、スパンしているトラックのみ考慮：
1. 分配すべきスペースを求める： アイテムのサイズ寄与から、スパンするすべてのトラックの影響サイズ（影響トラックだけでなく）を引き、0以上で切り捨てる。（無限の成長限界はトラックの基準サイズで代用。）この残りが分配すべきspaceとなる。
```
space = max(0, size contribution - ∑track-sizes)
```
2. spaceを限界まで分配：
  各影響トラックごとにitem-incurred increaseを次のように求める： spaceを均等に分配し、トラックの影響サイズ＋item-incurred increaseがlimitに達したらそのトラックは凍結（他の未凍結トラックへ分配を継続）。
  
  基準サイズの場合、 limitは成長限界であり、fit-content()引数があればそれも上限。成長限界の場合は、成長限界が有限かつトラックが無限成長可能でないならlimitは成長限界、そうでなければfit-content()引数（該当する場合）、それ以外は無限大。
  
  注：影響サイズが成長限界でトラックが無限成長可能でない場合、各item-incurred increaseは0。
3. 未影響トラックへの分配：
  この時点で余剰spaceが残っていて、アイテムが影響トラックと未影響トラック両方をスパンしている場合、前ステップと同様に未影響トラックに分配。
  
  注：残りスペースはまだ成長限界に達していないトラックに分配され、影響トラックの成長限界を超えることはない。
4. 限界超え分配：
  この時点で余剰spaceが残っている場合は、凍結を解除してitem-incurred increaseを…
  - 最小寄与またはmin-content寄与を基準サイズに対応する場合： 影響トラックのうち、内在最大トラックサイズ指定関数を持つもの; なければすべての影響トラック
  - max-content寄与を基準サイズに対応する場合： 影響トラックのうち、max-contentな最大トラックサイズ指定関数を持つもの; なければすべての影響トラック
  - どの寄与でも成長限界に対応する場合：内在最大トラックサイズ指定関数を持つ影響トラック
  この目的では、最大トラックサイズ指定関数がfit-content()の場合は、 fit-content()引数に達するまではmax-contentとして扱い、達したらその引数を固定サイズ関数とみなす（これにより分配対象トラックが変わる場合あり）。
  
  注：このステップは、限界を超えたサイズ寄与の分配優先順位を、各トラックの最大トラックサイズ指定関数の種別に基づき決める。
5. 各影響トラックについて、トラックのitem-incurred increaseが予定増分より大きい場合は予定増分をその値にする。
トラックの影響サイズを更新：予定増分を加算することで、次の分配ラウンドに反映される。（影響サイズが無限の成長限界の場合は、トラックの基準サイズ＋予定増分にする。）

11.6. トラックの最大化

余剰スペースが正の場合は、すべてのトラックの基準サイズに均等に分配し、トラックが成長限界に達したら凍結（未凍結トラックはさらに増やす）。

このステップの目的において：グリッドコンテナをmax-content制約下でサイズ指定する場合、空きスペースは無限大となる。 min-content制約下でサイズ指定する場合、

この処理によってグリッドがグリッドコンテナの内側サイズ（max-width/heightで制限される）を超える場合は、このステップをやり直し、利用可能なグリッド空間をグリッドコンテナの内側サイズ（max-width/heightでサイズ指定された場合）と同じとして扱う。

11.7. 柔軟トラックの拡張

このステップでは柔軟トラックのサイズを、 fr単位で割り当てうる最大値でfrを決定し、利用可能スペースを超えないようにします。

まずグリッドの使用flex分数を求めます：

余剰スペースが0、またはグリッドコンテナをmin-content制約でサイズ決定中の場合：

使用flex分数は0。

それ以外で余剰スペースが確定長の場合：

使用flex分数は、すべてのグリッドトラックと埋めるべきスペースを使って frのサイズ決定で算出。

それ以外で余剰スペースが未確定長の場合：

使用flex分数は以下の最大値：

各柔軟トラックについて、flex係数が1より大きければトラックの基準サイズをflex係数で割った値; それ以外はトラックの基準サイズ
柔軟トラックをまたぐ各グリッドアイテムについて、そのアイテムがまたぐ全トラックとアイテムのmax-content寄与を使って frのサイズ決定で算出。

このflex fractionを使用すると、グリッドがグリッドコンテナのmin-width/heightより小さくなる場合（またはグリッドコンテナのmax-width/heightより大きくなる場合）、このステップをやり直し、空きスペースを定義済みとして扱い、利用可能なグリッド空間をグリッドコンテナの内側サイズ（min-width/heightまたはmax-width/heightでサイズ指定）と同じにする。

各柔軟トラックについて、使用flex分数×トラックのflex係数がトラックの基準サイズより大きい場合は、基準サイズをその値に設定。

11.7.1. frのサイズ決定

このアルゴリズムは、fr単位が目標サイズを超えない最大値を算出します。グリッドトラックの集合と、埋めるべきスペースが必要です。

残余スペースを埋めるべきスペースから非柔軟グリッドトラックの基準サイズを引いた値とする。
flex係数合計を柔軟トラックのflex係数の合計とする。 1未満なら1にする。
仮想frサイズを残余スペース÷flex係数合計とする。
仮想frサイズ×柔軟トラックのflex係数がトラックの基準サイズ未満なら、そのトラックを非柔軟とみなしてアルゴリズムを再実行。
仮想frサイズを返す。

11.8. stretchなautoトラック

content-distributionプロパティがグリッドコンテナでこの軸で normalまたは stretchになっている場合、 autoな最大トラックサイズ指定関数を持つトラックに残った正の確定余剰スペースを均等に分配。余剰スペースが未確定だがグリッドコンテナのmin-width/heightが確定なら、そのサイズで余剰スペースを計算。

12. グリッドレイアウトの分割

グリッドコンテナは行や列間、アイテム内でページ分割できます。 break-*プロパティはグリッドコンテナに対し、参加するフォーマットコンテキストの通常の挙動で適用されます。このセクションではグリッドアイテムやその内容への適用方法を定義します。

以下の分割ルールは分割コンテナを「ページ」と呼びます。他の分割コンテキストにも同じ規則が適用されます。（必要に応じて「ページ」を適切な分割コンテナ種別に読み替え。） CSS Fragmentation Module [CSS3-BREAK]参照。

分割されたグリッドコンテナの厳密なレイアウトはこのレベルでは定義されません。ただしグリッドコンテナ内での分割は以下の規則に従います：

break-beforeと break-afterプロパティはグリッドアイテムではグリッド行に伝播される。最初の行のbreak-before、最後の行のbreak-afterはグリッドコンテナに伝播。
アイテム内で強制分割が発生した場合、内容サイズが増加扱いになるが、兄弟アイテム内で強制分割は発生しない。
クラスA分割機会は行や列間（該当軸）に、クラスC分割機会は最初/最後の行（列）とグリッドコンテナ内容端との間に発生。 [CSS3-BREAK]
グリッドコンテナが分割後に継続する場合、グリッドアイテムへの（分割コンテキストのブロックフロー方向での）利用可能スペースは、以前のページ上のグリッドコンテナ断片が消費したスペースだけ減少する。グリッドコンテナ断片が消費したスペースはそのページでの内容ボックスのサイズ。この調整で利用可能スペースが負になった場合は0にする。
前項によるアイテム再配置以外は、 UAはグリッドコンテナの分割なし状態でのゆがみを最小化するよう努めるべき。

12.1. 分割アルゴリズム例

この節は規範的ではありません。

これは分割アルゴリズムのラフドラフトであり、 [CSS-FLEXBOX-1]アルゴリズムと厳密な整合性検証が必要です。フィードバック歓迎ですが、実装指針には上記の規則を参照してください。

§ 11 グリッドレイアウトアルゴリズムに従い、分割コンテナのインラインサイズを使い、ブロックサイズは無限と仮定してグリッドをレイアウト。このステップではすべてのgrid-rowのautoやfr値は解決される必要あり。
前ステップの値を使ってグリッドコンテナをレイアウト。
グリッド領域のサイズが分割で変化した場合（行をスパンするアイテムは除く）、次の場合に必要なだけグリッド行サイズを増加：
- 内容サイズ指定関数（content min track sizing function）を持つ場合
- 明示的な高さ指定がないグリッドで、そのグリッド行が柔軟（flexible）な場合
グリッドの高さがautoの場合は、最終行サイズの合計をグリッドの高さとする。
分割中にmargin折り畳みによりグリッド領域がグリッドコンテナをはみ出す場合は、グリッド領域を収めるようグリッドコンテナを拡張する（分割による循環レイアウト依存を避けるため）。

グリッドの高さが指定されている場合、3・4のステップでグリッド行がグリッドをはみ出す場合があります。

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

Grid Layoutは新たなプライバシー漏洩を引き起こしません。

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

Grid Layoutは新たなセキュリティ上の考慮事項を導入しません。

謝辞

この仕様は、Erik Anderson、Rachel Andrew、Rossen Atanassov、Oriol Brufau、Manuel Rego Casasnovas、Arron Eicholz、Javier Fernandez、Sylvain Galineau、Markus Mielke、Daniel Holbert、John Jansen、Chris Jones、Kathy Kam、Veljko Miljanic、Charbel Nicolas、Mats Palmgren、François Remy、Sergio Villar Senin、Jen Simmons、Christian Stockwell、Eugene Veselov、CSS Working Groupのメンバーの意見提供によって実現しました。特に、MicrosoftのRossen Atanassov、Alex Mogilevsky、Phil Cupp、Peter Salasによる初期提案に感謝します。また、Eliot Graffには編集面での貢献に感謝します。

変更点

このセクションでは、以前の公開以降の変更点を記載しています。

2020年12月18日CR以降の変更点

フレックス合計が0から1の間の場合、柔軟トラック間で比率に基づいてトラック空間を分配することで、0からの連続性を保つように、内在的トラック空間分配を変更しました。(Issue 6078)

アイテムがまたがる全てのflexible sizing functionsの合計がゼロ 1以上の場合、それらのトラックに対して空間をflexible sizing functionsの比率に従って分配し、等しく分配しません；合計が1未満の場合は、その比率分だけ空間を分配し、残りは等分します
グリッドアイテムのコンテンツベース最小サイズが内在サイズの寄与の一種であり、[CSS-SIZING-3]の関連ルールの影響を受けることを明確化しました。 (Issue 5665)
転送サイズ提案の適用範囲を、当初の意図通り置換要素に限定しました。非置換要素も aspect-ratioプロパティでアスペクト比を持てるようになったためです。 [CSS-SIZING-4] (Issue 6069)
圧縮可能な置換要素の希望サイズおよび最大サイズに対するパーセンテージはゼロで解決され、コンテンツベース最小サイズを制限するために使われます。これにより自動最小サイズがmin-content寄与より大きくなりません。 (Issue #6278)

いずれの場合も、サイズ提案は影響軸における最大サイズでさらに制限されますアイテムが圧縮可能な置換要素であり、該当する軸で定義済みの希望サイズまたは最大サイズを持つ場合、サイズ提案はそれらのサイズで上限されます。これらサイズの未定義のパーセンテージはゼロとして解決され、定義済みとみなされます。
パーセンテージが指定された希望サイズおよび最大サイズが、転送サイズ提案を常に制限し、その軸でネイティブに適用されるサイズ制約より弱くなるようにしました。 (Issue #6278)

アイテムが希望アスペクト比を持ち、対軸で希望サイズが定義済みの場合、転送サイズ提案はそのサイズ（対軸の最小・最大サイズで制限、定義済みの場合）をアスペクト比で変換します。それ以外の場合は未定義です。

アイテムが該当軸で定義済みの希望サイズまたは最大サイズを持つ場合、転送サイズ提案はそれらのサイズで上限されます。未定義のパーセンテージはゼロとして解決され、定義済みとみなされます。
§ 10.2 autoマージンによる整列を規範化し、表現を厳密化しました。動作の一部が他で定義されていなかったためです。 (Issue 5923)
§ 11.8 autoトラックのストレッチ条件を、該当するコンテンツ分布プロパティがstretchとして動作することに条件付けました。 (Issue 5966)
fit-content()がスパンするアイテムを収容する際のトラック成長の制限方法をより正確に定義しました。 (Issue 4549)

内在的最大値について: 次に、余剰空間を分配し、成長制限を持つトラックに対して、 max track sizing functionがmax-contentの場合、それらのアイテムのmax-content寄与を考慮します。 ~~ただし、fit-content()トラックの成長は、そのfit-content()引数で制限します。~~

限界までspaceを分配: […]

base sizeについては、 limitは成長制限（さらに、fit-content()引数で上限されます）です。成長制限については、 limitは ~~無限大（infinitely growableの場合）、それ以外の場合は成長制限~~ 成長制限が有限で、そのトラックがinfinitely growableでない場合は成長制限、それ以外は、fit-content()引数（fit-content()トラックサイズ関数を持つ場合）、それ以外は無限大です。
限界を超えてspaceを分配: […]
- 成長制限に寄与する場合: ~~全てのaffected track~~ 内在的max track sizing functionを持つaffected track です。
この場合、 max track sizing functionがfit-content()トラックでは、 max-contentとして扱い、それトラックがfit-content()引数の制限に達するまで、その後は、それそのmax track sizing function は持つその引数の固定サイズ関数となり（この段階でどのトラックが空間を受けるかが変わる可能性があります）です。
static positionのgrid-placement propertiesへの感度を除去し、常にgrid containerのcontent boxを使用するようにしました。 (Issue 7661)

static position [CSS2]は、grid containerの唯一のグリッドアイテムとして、grid areaの端が grid containerのcontent edgeと一致するように決定されます。ただし、親のgrid containerが絶対配置要素のcontaining blockの生成元でもある場合は、§ 9.1 グリッドコンテナを含む場合で決定されるgrid areaを使います。
グリッドサイズアルゴリズムの概要を再編成し、グリッドコンテナのサイズ指定とグリッドトラックのサイズ指定の関係がより分かりやすくなるようにしました。 § 11 Grid Layout Algorithmを参照してください。 (Issue 3418)

2020年8月18日CR以降の変更点

前回CRで未記載のclarify作業によって生じた誤りを修正し、§ 6.2 グリッドアイテムのサイズ指定とaspect-ratioの相互作用を明確化しました。
「内在的アスペクト比」の表記を汎用的な希望アスペクト比に更新しました。 (Issue 4962)
用語の微調整や仕様間の用語整合性向上など、編集上の小さな修正を行いました。

2017年12月15日CR以降の変更点

コメント対応一覧を公開しています。

主な変更点

グリッドアイテムのブロック軸のmargin/paddingがブロック次元ではなくインライン次元で解決されるように変更しました。ブロックと同様です。 (Issue 2085)
柔軟トラックをまたぐアイテムの扱いを調整し、内在的トラックサイズに柔軟トラックが内在的最小値を持つ場合もそのサイズに寄与するようにしました。 (Issue 2177)
- スパンしないアイテムに合わせてトラックをサイズ指定: 内在的トラックサイズ関数を持つ（かつ柔軟サイズ関数でない）各トラックについて、スパン数1のアイテムを考慮:
- …
- 柔軟トラックをまたぐスパンアイテムでサイズ拡張: 次に、前ステップを繰り返し、（スパンサイズごとでなくまとめて）以下の条件を満たす全てのアイテムを考慮:
  - 柔軟トラックを max track sizing functionはmin track sizing functionと同じとして扱う
  - 空間分配は柔軟トラックのみに行う（他トラックは固定サイズ関数で現在のbase sizeとする）
  - 比率に従い空間分配（等分しない）
auto最小トラックへのアイテムの寄与が、min-content/max-content制約下で固定最大値を超えないよう制限しました。 (Issue 2303)

トラックがautoのmin track sizing functionを持ち、 grid containerがmin/max-content constraint下でサイズ指定される場合、トラックのbase sizeはアイテムのmin/max-content寄与の最大値となりますが、いずれもmax track sizing functionが固定の場合はそれ以下に制限され、最終的にはminimum contributionで下限されます。

ISSUE: スパンアイテムへの対応が必要です。
トラックの整列（align-content/justify-content）のアルゴリズムへの統合を強化しました。 (Issue 2557, Issue 2697)
トラックリストの使用値はrepeat()記法を使わずにシリアライズする必要があることを定めました。 (Issue 2427)
UAがサポートすべきトラックの最小数（メモリ圧迫等がない場合）を規定しました。 (Issue 2261)

メモリには限りがあるため、 UAはgridの可能なサイズをUA定義の上限で制限できます（[-10000, 10000]の範囲のラインは収容できるべき）。その範囲外のラインはすべて除外されます。グリッドアイテムがこの範囲外に配置された場合、グリッド領域はその制限内にクランプされなければなりません。
autoをライン名<custom-ident>から除外しました。 (Issue 2856)
grid-template-areasの指定値がnull cell tokenや空白を正規化する必要があることを定めました。 (Issue 3261)

指定値・計算値共にgrid-template-areasの<string>値は、null cell tokenを"."（U+002E FULL STOP）で、空白の連続は1つの空白（U+0020 SPACE）としてシリアライズします。
グリッドコンテナ子のstatic positionはpadding edgeではなくcontent edgeで解決されるようにしました。 (Issue 3020)

static position [CSS2]は、grid containerの唯一のグリッドアイテムとして、grid areaの端が ~~padding~~ content edgeと一致するように決定されます。 grid container参照。
グリッド（および周囲のpadding）はスクロール可能なオーバーフロー領域に含まれるようになりました。 § 5.3 スクロール可能なグリッドのオーバーフロー参照。 (Issue 3638, Issue 3665)
余剰空間分配の際、柔軟トラックの柔軟サイズ関数合計がゼロの場合はゼロ除算しないようにしました。 (Issue 3694)

アイテムがまたがる全柔軟サイズ関数の合計がゼロより大きい場合、それらのトラックに対し比率で空間分配を行い、等分しません。
柔軟トラックの成長制限を内在サイズとして計算せず、内在的トラックサイズ指定の最後にbase sizeへ設定し、Maximize Tracks中に成長しないようにしました（auto/min/maxの解釈違いによる影響など）。 (Issue 3693)
- 柔軟トラックを、~~max track sizing function＝min track sizing function~~ 無限大の成長制限として扱います
まだ無限大の成長制限を持つトラックがある場合（例えばアイテムが置かれていない場合や柔軟トラックの場合）は、成長制限をbase sizeに設定します。
柔軟トラック展開時、min-content制約を空きスペースゼロ時と同様に扱うようにしました。 (Issue 3683)

空きスペースがゼロ、またはgrid containerがmin-content constraint下の場合:
使用されるflex fractionはゼロです。
グリッドアイテムが複数トラック（うち1つでも柔軟トラック）をまたぐ場合、自動最小寄与もゼロになるようにしました。 (Issue 4783)
グリッドアイテムの最小サイズのデフォルトをより合理的にするため、 an its 自動最小サイズは、 ~~on a grid item that is not a scroll container and that spans at least one track in that axis whose min track sizing function is auto~~ コンテンツベース最小サイズとなります ; 次の場合:
- スクロールコンテナでない
- その軸で1つ以上のトラックをまたぐかつそのトラックのmin track sizing functionがauto
- 複数トラックをまたぐ場合、その軸のいずれかのトラックが柔軟トラックでないこと
それ以外の場合、使用される自動最小サイズは ~~otherwise~~ 通常どおりゼロです。

小規模な変更

グリッドコンテナのベースラインを検出する際、最初の行以降のアイテムを無視するという意図しない変更を元に戻しました。また、走査順序も明確化しました。 (Issue 3645)
- それ以外の場合、グリッドコンテナに少なくとも1つのグリッドアイテムがある場合、 ~~その領域が最初（または最後）の行と交差する~~ 、グリッドコンテナの最初（または最後）のベースラインセットは生成されます。最初（または最後）の ~~そのような~~ グリッドアイテムの行優先のグリッド順（グリッドコンテナの書字モードに従う）に応じて決まります。アイテムがグリッドのインライン軸に整列ベースラインを持たない場合は、まずそのボーダーエッジから合成されます。
auto-fitやauto-fillの繰り返し数を計算する際、max track sizing functionをmin track sizing functionで下限します。 (Issue 4043)

…（各トラックをmax track sizing functionとして扱い、それが定義済みならそれを、そうでなければmin track sizing functionとして扱う。両方定義済みならmax track sizing functionをmin track sizing functionで下限する。 gapも考慮）…
柔軟トラックの成長制限を、最初はbase sizeにせず、無限大に初期化するように変更しました。 (Issue 4313)

内在サイズ関数
柔軟サイズ関数
初期成長制限は無限大とする。
~~柔軟サイズ関数~~
~~トラックの初期base sizeを初期成長制限とする。~~
- ~~柔軟トラックは無限大の成長制限を持つものとして扱う。~~
この変更は編集のみで、実装への影響はありません。
grid-template-areasの<string>値で空白が正規化されることを明確化しました。 (Issue 4335) § 7.3.1 テンプレート文字列のシリアライズ参照。
「ベースライン整列アイテムがあれば使う」と「最初に出現するアイテムを使う（最初の行でなくても）」という条件の組み合わせの仕様を明確化し、最初の行に何もなくても2行目にベースライン整列アイテムがあればそれを使う（その行の最初のアイテムを取るだけではない）ようにしました。 (Issue 3645の一部)
1. グリッドコンテナgrid containerの最初（または最後）の行で、少なくとも1つグリッドアイテムが含まれている行を探す。
  
  ~~その行と交差するグリッドアイテムがベースライン整列に参加する場合、~~ その行と交差するグリッドアイテムの中でベースライン整列に参加するものがいれば、グリッドコンテナのベースラインセットはそれらの整列ベースラインから生成されます。
  
  ~~それ以外の場合は、グリッドコンテナに少なくとも1つグリッドアイテムがあれば、~~ それ以外の場合、グリッドコンテナの最初（または最後）のベースラインセットは生成されます。最初（または最後）のグリッドアイテムの行優先グリッド順（グリッドコンテナの書字モードによる）で決まります。 ~~そのアイテムがグリッドのインライン軸に整列ベースラインを持たない場合、~~ そのグリッドアイテムがグリッドのインライン軸に整列ベースラインを持たない場合、まずそのボーダーエッジから合成されます。
2. ~~それ以外の場合、グリッドコンテナには最初（または最後）のベースラインセットはありません。~~ グリッドコンテナにグリッドアイテムが含まれていない場合、グリッドコンテナには最初（または最後）のベースラインセットはありません。必要に応じて合成されます。その整列コンテキストの規則に従う。
アイテム検索を正しいベースライン整列に参加しているアイテムだけに限定する仕様を明確化しました。 (Issue 5293)
その行と交差するグリッドアイテムがベースライン整列その行でに参加している場合、グリッドコンテナのベースラインセットはそれらのグリッドアイテムの整列ベースラインから生成されます。
grid-template-areasはグリッドに少なくとも1セルを定義しなければならないことを規定しました。grid-template-areas: "" "";は無効です。 (Issue 5110)

すべての文字列は同じ数の列セル・トークン（名前付きセル・トークンまたはnullセル・トークン）が必要で、1つ以上のセル・トークンが必要です。これに違反すると宣言は無効です。
内在的max track sizing functionへの空間分配時、min-content寄与をminimum contributionに誤って変更していたのを元に戻しました。 (Issue 4790)

内在的最大値について: 次に、成長制限を持つトラックの内在 max track sizing functionを必要に応じて余剰空間分配で増加させ、これらアイテムの ~~minimum~~ min-content 寄与を考慮します。
automatic minimum sizeをcomputed valueのoverflowで条件付けするように変更しました。これにより、置換要素などでcomputed scrollable overflow valuesがnon-scrollableなused valuesになる場合を避けます。 (7714)

明確化

grid-auto-rowsおよびgrid-auto-columnsは、explicit grid tracksのうち、grid-template-areasによって生成され、grid-template-rowsやgrid-template-columnsでサイズが指定されていないものに適用されることを明確化しました。 (Issue 4914)

…これらのラインは明示的グリッドと合わせて暗黙的グリッドを構成します。 grid-auto-rowsおよびgrid-auto-columnsプロパティはこれらの暗黙的グリッドトラックをサイズ指定します、明示的なグリッドトラック、 grid-template-areas によって作成されたが、 grid-template-rows または grid-template-columns で明示的にサイズ指定されていないものも含みます。

grid-auto-columnsとgrid-auto-rowsプロパティは、 ~~そのような暗黙的トラック~~ grid-template-rowsやgrid-template-columnsでサイズ指定されていないトラックのサイズを指定します。

トラックサイズが複数指定された場合、パターンは必要に応じて繰り返され、 ~~暗黙的~~ 該当するトラックのサイズを決定します。最初の ~~暗黙的グリッド~~ トラックは ~~明示的グリッド~~ 最後の明示的サイズ指定されたトラックの後に現れ、最初に指定されたサイズを割り当てられます。以降も同様。また、最後の暗黙的グリッドトラックは明示的グリッドの前に現れ、最後に指定されたサイズを割り当てられます。以降も同様。
トラックサイズアルゴリズムへの注意書きを追加し、ガターは固定サイズのトラックとして扱うこと、およびスパンアイテムとの関係（ガターは対応するラインをまたぐアイテムによってスパンされる）を明確化しました。 (Issue 2201)

トラックサイズ指定の目的では、各ガターは追加の、空の固定サイズトラックとして扱われます。指定サイズで、対応するグリッドラインをまたぐグリッドアイテムがそのガターをスパンします。。

注意: ガターは固定サイズトラック（min/max sizing functionともガターの使用サイズに設定されたトラック）としてグリッドサイズアルゴリズムで扱われます。その幅はトラックサイズアルゴリズムの計算に組み込む必要があります。
内在的サイズ指定中もトラックサイズがゼロ未満にならないように明確化しました。 (Issue 2655)
各プロパティのcomputed valueやアニメーション型の記述をより明確化しました。特にgrid-template-rowsおよびgrid-template-columns。 (PR 3198, Issue 3201)
minimum contributionがintrinsic size contributionの一種であることを明確化しました。 (Issue 3660)

アイテムのminimum contribution はintrinsic size contributionの一種とみなされ、外側サイズとなります…
成長制限を超えた空間分配条件を、正しいフェーズと明確に対応させて仕様化しました。 (Issue 3621)
- 次の場合 ~~min-contentやauto最小値のトラックのbase sizeを扱う~~ minimum contributionまたはmin-content contributionを収容する：影響を受けるトラックの中で、内在的max track sizing functionを持つものすべて。そういうトラックがなければ全ての該当トラック。
- 次の場合 ~~max-content最小値のトラックのbase sizeを扱う~~ max-content contributionを収容する：影響を受けるトラックの中でmax-contentのmax track sizing functionを持つものすべて。そういうトラックがなければ全ての該当トラック。
minimum contributionがminimum sizeから取得されるケースを明確化しました。 (Issue 3612)
アイテムのminimum contributionは最小外側サイズです。具体的には、アイテムの使用minimum size（min-widthまたはmin-height、該当軸に応じて）を preferred size（widthまたはheight、該当軸に応じて）とみなして計算した外側サイズ。ただし、computedなpreferred sizeがautoとして振る舞うまたは該当軸のコンテナサイズに依存する場合はこの値、それ以外はアイテムのmin-content contributionとなる。 minimum sizeは多くの場合アイテムの内容サイズに依存するため、 intrinsic size contributionの一種とみなされます。
display: contentsを持つ要素を挟んだ場合にもブロック化が起こること、またgrid/inline-grid要素が実際にグリッドコンテナボックスを生成するかどうかは考慮しないことを明確化しました。 (Issue 4065)

グリッドアイテムのdisplay値はblockifiedされます。グリッドコンテナを生成する要素の流れ内の子の指定display値がインラインレベルなら、ブロックレベルに計算されます。要素の最も近い祖先（display:contentsをスキップして）で computedなdisplay値がgridまたはinline-gridなら、要素自身のdisplay値はblockifiedされます。

注意: flexやinline-flex要素が最終的にフレックスコンテナボックスを生成しない場合（例えば置換要素やdisplay: noneの部分木内）、ブロック化は依然として発生します。
fit-content()の引数はautomatic minimum sizeを制限しない旨の注意を追加しました。 (Issue 4549)

fit-content()の引数は、 content-based minimum sizeを固定 max track sizing functionと同じようには制限しません。
§ 11.7 柔軟トラックの展開で柔軟トラックの前提条件を明確化しました。
使用されるflex fractionは以下の最大値です:
- 各柔軟トラックについて、トラックのflex係数が1より大きければbase sizeをflex係数で割った値、そうでなければbase size。
- 柔軟トラックをまたぐ各グリッドアイテムについて、アイテムがまたぐ全トラックとアイテムのmax-content contributionで埋める空間でfrサイズを決定した値。
item-incurred increaseの初期計算を読みやすくしました。 (Issue 5351)
空間を~~base sizes~~の~~growth~~制限まで分配: 各スパンしたトラックで影響サイズを持つものについてitem-incurred increaseを求める。空間は該当トラック間で均等分配し、トラックの影響サイズ+item-incurred increaseが ~~growth limit~~ limit に達したらそのトラックのitem-incurred increaseを固定し、残りのトラックは必要に応じて成長。
~~このフェーズでinfinitely growableとされたトラックは growth limitを無限大として扱う（その後unmark）。~~

base sizesの場合、 limitはその成長制限。 growth limitsの場合、 limitはinfinitely growableなら無限大、それ以外はその成長制限。

注意: 影響サイズがgrowth limitの場合トラックがinfinitely growableでないなら各item-incurred increaseはゼロになります ~~このステップは効果を持たない~~ 。

2016年9月29日CR以降の変更点

コメント処理状況も公開されています。

主な変更点

subgrid機能は実装不足と更なる議論の必要からLevel 2へ延期されました。 (Issue 958)
grid-row-gapおよびgrid-column-gapをgrid ショートハンドでリセットされるプロパティ一覧から削除しました。 (Issue 1036)
grid-row-gap、grid-column-gap、grid-gapプロパティを削除し、代わりにrow-gap、 column-gap、gapが定義されました（CSS Box Alignmentで定義）。 (Issue 1696)
自動サイズ指定されたグリッドアイテム（画像等）の自然寸法の維持方法を変更し、整列プロパティがnormal（デフォルト）の場合は常に自然寸法を維持するようになりました。 (Issue #523) 詳細は§ 6.2 グリッドアイテムのサイズ指定（原文）参照。
<percentage>トラックの挙動を変更し、grid containerのサイズがそれらトラックのサイズに依存する場合、実装に合わせてautoとして寸法を寄与、その後パーセンテージをグリッドコンテナサイズに対して解決するようになりました。これにより、autoトラックやautoサイズのグリッドコンテナがパーセンテージを尊重するためにサイズが増加するのではなく、オーバーフローが発生する場合があります。 <percentage>サイズがfit-contentサイズのautoサイズのインラインまたはフロートグリッドコンテナ等で使われる場合、トラックや内容がオーバーフローしやすくなります。（この問題を避けるには、比率維持かつオーバーフローしない<flex>単位を使ってください。）

grid containerのサイズがトラックのサイズに依存する場合、 <percentage>はautoとして扱い、グリッドコンテナの内在サイズ計算時はautoとして扱い、グリッドやアイテムのレイアウト時はそのサイズを基準にパーセンテージを解決します。 ~~UAはトラックの内在サイズ寄与を調整し、パーセンテージを尊重するのに最小限サイズ増加を行ってもよい。~~

重要な調整と修正

flex係数1でのクランプを不定の場合にも適用しました。 (Issue 26, 議論参照):

~~各柔軟トラックのbase sizeをflex factorで割った値。~~ 柔軟トラックのflex factorが1より大きい場合は base sizeをflex factorで割った値、そうでない場合はトラックのbase size。
グリッドトラックのstretchサイズ指定をトラックサイズアルゴリズムに統合しました。 (Issue 1150, Issue 1866)

トラックはgrid container内でalign-contentとjustify-contentプロパティに従い整列されます。注: これによりトラック内や間に余剰空間が生じる場合があります。トラック内に空間を導入する場合、autoのmax track sizing functionを持つトラックのみ空間を受け入れます。

これによりトラック間に余剰空間が生じ、ギャップをまたぐグリッドアイテムのグリッド領域がトラックサイズ時より大きくなる場合があります。
ステップ数は 4 5 つです:
ストレッチ autoトラック

このステップでは、autoのmax track sizing functionを持つトラックを対象に、残りの正の定義済み空きスペースを均等に分配してサイズ指定します。空きスペースが未定義の場合でも grid containerに定義済みのmin-width/heightがあれば、それを用いてこのステップの空きスペースを計算します。
グリッドアイテムのベースライン整列がトラックサイズアルゴリズムにより統合され、循環依存ケースは除外されました。 (Issue 1039, Issue 1365,)

ベースライン整列が指定されたgrid itemが、その軸で内在的サイズトラックに依存（アイテムサイズとベースライン整列が相互依存し循環依存になる）する場合、そのアイテムはベースライン整列に参加せず、代わりにフォールバック整列を使用します。

ベースライン整列アイテムの内在サイズ寄与がベースライン整列を反映するようshimを追加。各ベースライン共有グループ内のアイテムに、開始/終了側（first/last-baseline alignment）に「shim」（事実上追加margin）を加え、開始/終了整列時にベースラインが指定通り整列するようにします。

この「shim」はトラックサイズ指定時の内在サイズ寄与の一部として扱います。アイテムが複数の内在サイズ寄与を持つ場合、それぞれに異なるshimがある場合があります。

注: ベースラインself整列とベースラインcontent整列アイテムの両方がここで対象となります。

注: grid item自身のサイズが内在的サイズトラックに依存する場合はベースライン整列に参加しないため、shimは追加されません。
自動最小サイズの発動条件を、autoトラックをまたぐ場合のみに調整しました。 (Issue 12) また、アイテムがアスペクト比を持つ場合に転送サイズへ正しく反映されるようにし、この暗黙の最小値が固定サイズグリッド領域のオーバーフローを強制しないようにしました。 (Issue 11)

… auto値のmin-width/min-heightは、指定軸で自動最小サイズを適用します。 grid itemsのうち、overflowがvisibleで、かつ最小トラックサイズ関数がautoなトラックを1つ以上またぐアイテムに適用。 …

ただし、grid itemが固定サイズ関数を持つgrid tracksのみをまたぐ場合、その ~~自動最小サイズ~~ 指定サイズと内容サイズはその寸法で（もう一方の寸法の転送サイズの入力も同様） grid領域のサイズ（自動最小サイズによる固定サイズグリッド領域のオーバーフロー防止）以下に制限されます。
自動最小サイズの定義を、内容サイズではなく転送サイズを優先するように変更しました（両者の小さい方を使わない）。 (Issue #1149)

… ~~自動最小サイズはflex itemsにも課される。[CSS-FLEXBOX-1]~~

自動最小サイズは、指定サイズがあればそれを、なければ転送サイズ、なければ内容サイズ（各定義は[CSS-FLEXBOX-1]参照）を使います。ただし、grid itemが固定サイズ関数のgrid tracksのみをまたぐ場合は…
auto最小トラックサイズのアルゴリズムにおけるmax-content制約処理の誤りを修正し、編集上の改善も行いました。 (Issue 5)
1. スパンアイテムに合わせてサイズ拡張: 次にスパン数2のアイテム（柔軟サイズ関数を持つトラックをまたがないもの）について、 min track sizing functionがautoの場合、グリッドコンテナがmin-content/max-content制約下ならmin-content/max-contentとして扱う :
  1. …
  2. 内容ベース最小値の場合: 次に、base sizeを min track sizing functionがmin-contentまたはmax-contentのトラックに対して ~~、min track sizing functionがautoの場合、グリッドコンテナがmin-content制約下なら同様に扱う、~~ 余剰空間分配で min-content contributionを考慮して増加。
  3. max-content最小値の場合: さらにbase sizeを min track sizing functionがmax-contentのトラックに対して ~~、max track sizing functionがautoの場合、グリッドコンテナがmax-content制約下なら同様に扱う、~~ 余剰空間分配で max-content contributionを考慮して増加。
余剰空間分配アルゴリズムで、累積をアイテムごとでなくトラック集合ごとに行うよう修正。また、アイテムごと分配された空間は加算ではなくmax()で増加とするべきことを明確化しました。 (Issue #1729)
1. 各アイテムについて、
  1. …
  2. 成長制限までbase sizeに空間分配: ~~スパンした各トラックの計画増分に均等分配~~ スパンした各トラックの影響サイズごとにitem-incurred increaseを求め、空間を均等分配し、トラックサイズが成長制限に達したら凍結（残りは必要に応じて成長）。 …
  3. 成長制限超えの空間分配: 全トラックが凍結後も空間が残る場合、各トラックのitem-incurred increaseに空間分配 …
  4. 各トラックについて、 item-incurred increaseがplanned increaseより大きければその値でplanned increaseを上書き。
2. [番号変更 ~~2.4~~ →3] トラックの影響サイズ更新：planned increaseを加算。（影響サイズが無限大の成長制限なら、base size+planned increaseに設定。）
トラックサイズ指定後、grid areaはグリッドアイテムのレイアウト目的に定義済みとみなすことを規定しました。 (Issue 1319, Issue 1320)

各grid areaのサイズが決定した後、 grid itemsはそれぞれのコンテナブロックにレイアウトされます。 grid areaの幅・高さはこの目的では定義済みとみなします。

注: 定義済みサイズのみで計算される式（stretch fit式等）も定義済みとなるため、伸張されたグリッドアイテムのサイズも定義済みとみなします。
block-levelなgrid containerサイズ定義の誤りを修正。 in-flow block-level grid containersはstretch-fit sizeを使い、out-of-flow block-level gridはfit-content sizeを使う。非置換block boxと同様です。 (Issue 1734)
block-levelボックスがblock formatting context内にある場合、 block boxとして整形コンテキストを確立し、 autoのinline sizeは ~~in-flow~~ 非置換 block boxと同じ方法で計算されます。
暗黙グリッドトラックサイズのパターン繰り返し処理の誤りを修正しました。 (Issue 1356)

トラックサイズが複数指定された場合、暗黙トラックサイズ決定のためパターンを必要に応じて繰り返します。最初の暗黙グリッドトラックは ~~before~~ after 明示的グリッドの後に現れ、最初に指定されたサイズを受け取ります。以降も同様。最後の暗黙グリッドトラックは明示的グリッドの前に現れ、最後に指定されたサイズを受け取ります。以降も同様。

明確化

fit-content()はstretchなalign-content/justify-contentの影響を受けないことを明確化しました。 (Issue 1732)

式は min(max-content, max(auto, argument)) で表されます。この計算は ~~auto（つまり~~ minmax(auto, max-content) ）と同様ですが、trackサイズがargumentより大きい場合はその値でクランプされます。
minimum contributionの定義を明確化しました。 (Issue #507)

それ以外の場合、 base sizeはアイテムのminimum contributionの最大値に設定します : 。アイテムのminimum contributionは次の値です ~~それぞれの~~ ：アイテムの min-widthまたはmin-height値（該当軸に応じて）を指定サイズとみなした場合の外側サイズその指定サイズ（width またはheight、該当軸に応じて）がautoの場合はこの値、それ以外はアイテムのmin-content contribution。
分布整列で割り当てられる空間もガターの一部として扱われ、ガターとともに折り畳まれることを明確化しました。 (Issue #1140)

collapsed trackは 0pxの固定track sizing functionとして扱われ、両側のガター（分布整列で割り当てられた空間も含む）折り畳まれます。

CSS Box Alignmentの変更も参照:

整列対象: ~~該当軸の非collapsedなgrid tracks。~~ 該当軸のgrid tracks全てで、トラック間に挿入されたスペースは対応するガターに加算し、 collapsed gutterは空間挿入の単一機会とみなす。
flexible lengthの説明を「free space」から「leftover space」に変更し、同一名称による概念混同を防止しました。
Maximize Tracksステップがトラックのbase sizesを成長させることを明確化しました。 (Issue 1120)
空きスペースが正の場合、全トラックの base sizes に均等分配し、各トラックがgrowth limitsに達したら凍結（残りは必要に応じて成長）。
その他微細な修正と編集改善。

適合性

文書規約

適合性要件は、記述的な主張とRFC 2119の用語を組み合わせて表現されます。重要なキーワード「MUST」、「MUST NOT」、「REQUIRED」、「SHALL」、「SHALL NOT」、「SHOULD」、「SHOULD NOT」、「RECOMMENDED」、「MAY」、「OPTIONAL」は、この文書の規範的な部分ではRFC 2119で説明されている通りに解釈されます。ただし、読みやすさのため、本仕様ではこれらの語はすべて大文字では記載されていません。

本仕様の全ての文章は、明示的に非規範的と記載されたセクション、例、注意書きを除き、規範的です。[RFC2119]

本仕様の例は「例えば」という言葉で導入されるか、class="example"で規範的なテキストと区別されて提示されます。次のようになります：

参考ノートは「Note」で始まり、class="note"で規範的なテキストと区別されます。次のようになります：

勧告事項は規範的セクションで、特別な注意を喚起するためにスタイルされ、他の規範的テキストと区別して<strong class="advisement">で提示されます。例： UAはアクセシブルな代替手段を提供しなければなりません。

適合クラス

スタイルシートが本仕様に適合するためには、本モジュールで定義された構文を使用する全ての文が、汎用CSS文法および本モジュールで定義される各機能の個別文法に従って有効である必要があります。

レンダラーが本仕様に適合するためには、適切な仕様に従ってスタイルシートを解釈することに加え、本仕様で定義された全ての機能を正しく解析し、文書を正しくレンダリングする必要があります。ただし、デバイスの制限によってUAが文書を正しくレンダリングできない場合でも、UAが非適合とされることはありません。（例えば、UAがモノクロモニターで色を表示する必要はありません。）

オーサリングツールが本仕様に適合するためには、汎用CSS文法および本モジュールで定義される各機能の個別文法に従って構文的に正しいスタイルシートを作成し、本モジュールで説明されるスタイルシートのその他の適合要件も満たす必要があります。

部分的な実装

著者が前方互換性のある構文解析規則を活用してフォールバック値を割り当てられるように、CSSレンダラーは、サポート可能なレベルがないat-規則、プロパティ、プロパティ値、キーワード、その他の構文要素を無効として扱い、（適切に無視）しなければなりません。特に、ユーザーエージェントは、未サポートのコンポーネント値だけを選択的に無視して、サポートされている値だけを単一の複数値プロパティ宣言で採用してはなりません。いずれかの値が無効（未サポート値は必ず無効とみなされる）とされる場合、CSSの規則では宣言全体が無視される必要があります。

不安定および独自機能の実装

将来の安定したCSS機能との衝突を避けるため、CSSWGは、ベストプラクティスに従って不安定な機能や独自拡張をCSSに実装することを推奨します。

非実験的な実装

仕様がCandidate Recommendation段階に達すると、非実験的な実装が可能となり、実装者は仕様通りに正しく実装されていることを示せるCRレベル機能については、接頭辞なしの実装をリリースするべきです。

CSSの相互運用性を確立・維持するため、CSSワーキンググループは、非実験的なCSSレンダラーがCSS機能の接頭辞なしの実装をリリースする前に、実装報告書（必要に応じてその実装報告に用いたテストケースも）をW3Cに提出することを要請しています。W3Cに提出されたテストケースは、CSSワーキンググループによるレビューおよび修正の対象となります。

テストケースと実装報告書の提出方法などについては、CSS Working Groupのウェブサイトhttps://www.w3.org/Style/CSS/Test/を参照してください。質問はpublic-css-testsuite@w3.orgメーリングリストまでお寄せください。

CR終了基準

本仕様がProposed Recommendationへ進められるためには、各機能に対して少なくとも2つの独立した、相互運用可能な実装が必要です。各機能は異なる製品群によって実装されてもよく、全機能が単一製品で実装される必要はありません。この基準のために、以下の用語を定義します：

仕様はCandidate Recommendation状態を少なくとも6ヶ月間維持します。

名前	値	初期値	適用対象	継承	パーセンテージ	アニメーション型	正規順序	計算値
grid	<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>	none	グリッドコンテナ	個別プロパティ参照	個別プロパティ参照	個別プロパティ参照	文法通り	個別プロパティ参照
grid-area	<grid-line> [ / <grid-line> ]{0,3}	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	N/A	離散値	文法通り	個別プロパティ参照
grid-auto-columns	<track-size>+	auto	グリッドコンテナ	no	トラックサイズ参照	リスト長一致時は各アイテムの計算値型、そうでなければ離散値	文法通り	トラックサイズ参照
grid-auto-flow	[ row \| column ] \|\| dense	row	グリッドコンテナ	no	n/a	離散値	文法通り	指定キーワード
grid-auto-rows	<track-size>+	auto	グリッドコンテナ	no	トラックサイズ参照	リスト長一致時は各アイテムの計算値型、そうでなければ離散値	文法通り	トラックサイズ参照
grid-column	<grid-line> [ / <grid-line> ]?	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	N/A	離散値	文法通り	個別プロパティ参照
grid-column-end	<grid-line>	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	n/a	離散値	文法通り	指定キーワード、識別子、整数
grid-column-start	<grid-line>	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	n/a	離散値	文法通り	指定キーワード、識別子、整数
grid-row	<grid-line> [ / <grid-line> ]?	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	N/A	離散値	文法通り	個別プロパティ参照
grid-row-end	<grid-line>	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	n/a	離散値	文法通り	指定キーワード、識別子、整数
grid-row-start	<grid-line>	auto	グリッドアイテムおよびコンテナがグリッドコンテナである絶対配置ボックス	no	n/a	離散値	文法通り	指定キーワード、識別子、整数
grid-template	none \| [ <'grid-template-rows'> / <'grid-template-columns'> ] \| [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?	none	グリッドコンテナ	個別プロパティ参照	個別プロパティ参照	個別プロパティ参照	文法通り	個別プロパティ参照
grid-template-areas	none \| <string>+	none	グリッドコンテナ	no	n/a	離散値	文法通り	キーワードnoneまたは文字列値リスト
grid-template-columns	none \| <track-list> \| <auto-track-list>	none	グリッドコンテナ	no	コンテンツ領域の該当次元参照	リスト長一致時は計算トラックリスト内各アイテムの計算値型（参照）、そうでなければ離散値	文法通り	キーワードnoneまたは計算トラックリスト
grid-template-rows	none \| <track-list> \| <auto-track-list>	none	グリッドコンテナ	no	コンテンツ領域の該当次元参照	リスト長一致時は計算トラックリスト内各アイテムの計算値型（参照）、そうでなければ離散値	文法通り	キーワードnoneまたは計算トラックリスト

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

概要

この文書のステータス

1. はじめに

1.1. 背景と動機

1.1.1. 利用可能なスペースへのレイアウト適応

1.1.2. ソース順序からの独立性

1.2. 値の定義

2. 概要

2.1. グリッドの宣言

2.2. アイテムの配置

2.3. グリッドのサイズ指定

3. グリッドレイアウトの概念と用語

3.1. グリッドライン

3.2. グリッドトラックとセル

3.3. グリッド領域

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

5. グリッドコンテナ

5.1. グリッドコンテナの確立：gridおよびinline-grid display 値

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

5.3. スクロール可能なグリッドのオーバーフロー

5.4. 大きすぎるグリッドの制限

6. グリッドアイテム

6.1. グリッドアイテムの表示

6.2. グリッドアイテムのサイズ指定

6.3. 並べ替えられたグリッドアイテム：order プロパティ

6.4. グリッドアイテムのマージンとパディング

6.5. Z軸順序：z-index プロパティ

6.6. グリッドアイテムの自動最小サイズ

7. グリッドの定義

7.1. 明示的グリッド

7.2. 明示的トラックサイズ指定：grid-template-rows および grid-template-columns プロパティ

7.2.1. トラックサイズ

7.2.2. グリッドラインの命名：[<custom-ident>*]構文

7.2.3. 行・列の繰り返し：repeat()記法

7.2.3.1. repeat()の構文

7.2.3.2. 自動繰り返し：auto-fillとauto-fitの繰り返し

7.2.3.3. repeat() の補間・組み合わせ

7.2.4. 柔軟な長さ：fr単位

7.2.5. トラックリストの算出値

7.2.6. トラックリストの解決値

7.3. 名前付き領域：grid-template-areas プロパティ

7.3.1. テンプレート文字列のシリアライズ

7.3.2. 暗黙的に割り当てられるライン名

7.3.3. 暗黙的に名付けられる領域

7.4. 明示的グリッドショートハンド：grid-templateプロパティ

7.5. 暗黙的グリッド

7.6. 暗黙的トラックサイズ指定：grid-auto-rows・grid-auto-columnsプロパティ

7.7. 自動配置：grid-auto-flowプロパティ

7.8. グリッド定義ショートハンド：gridプロパティ

8. グリッドアイテムの配置

8.1. グリッド配置の一般的パターン

8.1.1. 名前付き領域

8.1.2. 数値インデックスとスパン

8.1.3. 名前付きラインとスパン

8.1.4. 自動配置

8.2. グリッドアイテム配置とソース順

8.3. ラインベースの配置：grid-row-start、grid-column-start、grid-row-end、grid-column-endプロパティ

8.3.1. グリッド配置の衝突処理

8.4. 配置ショートハンド：grid-column、grid-row、grid-areaプロパティ

8.5. グリッドアイテム配置アルゴリズム

9. 絶対位置指定

9.1. グリッドコンテナが包含ブロックの場合

9.2. グリッドコンテナが親の場合

10. 整列とスペース

10.1. ガター：row-gap・column-gap・gap プロパティ

10.2. autoマージンによる整列

10.3. インライン軸の整列：justify-self・justify-itemsプロパティ

10.4. ブロック軸の整列：align-self・align-itemsプロパティ

10.5. グリッド全体の整列：justify-content・align-contentプロパティ

10.6. グリッドコンテナのベースライン

11. グリッドレイアウトアルゴリズム

11.1. グリッドサイズ決定アルゴリズム

11.2. トラックサイズ関連用語

11.3. トラックサイズ決定アルゴリズム

11.4. トラックサイズ初期化

11.5. 内在トラックサイズ解決

11.5.1. スパンしたトラックへの余剰スペースの分配

11.6. トラックの最大化

11.7. 柔軟トラックの拡張

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