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

このグリッドレイアウトモジュールと フレキシブルボックスレイアウトモジュール の間に矛盾があることに気付いた場合は、それはおそらく誤りなので CSSWG に報告してください。

1. 導入

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

グリッドレイアウトは、ボックスとその内容のサイズ決定および配置を強力に制御するための CSS のレイアウトモデルです。 単一軸指向の フレキシブルボックスレイアウト（Flexbox）とは異なり、 グリッドレイアウトは 2 次元レイアウトに最適化されています： 両方向でのコンテンツの整列が望まれる場合です。

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

多くのレイアウトは Grid でも Flexbox でも表現できますが、それぞれ得意分野があります。 グリッドは 2 次元の整列を強制し、 上から下へのアプローチでレイアウトを行い、 アイテムの明示的な重なりを許可し、 より強力なスパン機能を持ちます。 フレックスボックスは軸内のスペース分配に集中し、 より単純な下から上へのアプローチを用い、 二次軸を制御するためにコンテンツサイズに基づく折り返しシステムを使用でき、 マークアップの階層に依存してより複雑なレイアウトを構成します。 両者は CSS 著者にとって有用かつ補完的なツールであると期待されます。

Grid Level 2 は サブグリッド 機能を追加します： サブグリッド化された軸は、そのグリッド線を要素の親のグリッドの線に合わせ、 親グリッドとの統合を通じてトラックのサイズを導出する軸です。

1.1. 背景と動機

ウェブサイトが単純な文書から複雑でインタラクティブなアプリケーションへと進化するにつれて、 例えばフロートのような文書向けのレイアウト技術は必ずしもアプリケーションレイアウトに適しているとは限りませんでした。 テーブル、JavaScript、またはフロート要素に対する慎重な測定の組み合わせを使って、 著者は望ましいレイアウトを実現するための回避策を見出しました。 利用可能なスペースに適応するレイアウトはしばしば脆弱であり、 スペースが制約されると直感に反する動作を引き起こしました。 代替として、多くのウェブアプリケーションの著者は固定レイアウトを選び、 画面上の利用可能なレンダリングスペースの変化を利用できなくしていました。

グリッドレイアウトの機能はこれらの問題に対処します。 予測可能なサイズ指定動作のセットを使用して、レイアウト用の利用可能なスペースを列と行に分割する機構を著者に提供します。 著者はその後、アプリケーションの構成要素を、これらの列と行の交差で定義される グリッド領域 に正確に位置付けおよびサイズ指定できます。 以下の例は、グリッドレイアウトの適応能力とコンテンツとスタイルのより明確な分離をどのように可能にするかを示しています。

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

グリッドレイアウトは、ウェブページ内の要素を賢くリサイズするために使用できます。 隣接する図は、レイアウトに5つの主要コンポーネント（ゲームタイトル、統計領域、ゲームボード、スコア領域、コントロール領域）を持つゲームを表しています。 著者の意図は、次のようにゲームのためのスペースを分割することです：

• 統計領域は常にゲームタイトルの直下に表示されること
• ゲームボードは統計とタイトルの右側に表示されること
• ゲームタイトルの上端とゲームボードの上端は常に揃うこと
• ゲームが最小高さに達しているときは、ゲームボードの下端と統計領域の下端が揃うこと。 それ以外の場合、ゲームボードは利用可能なすべてのスペースを活用するために伸びること
• コントロールはゲームボードの下で中央に配置されること
• スコア領域の上端はコントロール領域の上端に揃うこと
• スコア領域は統計領域の下にあること
• スコア領域は統計領域の下のコントロールに揃っていること

次のグリッドレイアウトの例は、著者がすべてのサイズ指定、配置、および整列のルールを宣言的にどのように達成できるかを示しています。

/**
 * Define the space for each grid item by declaring the grid
 * on the grid container.
 */
#grid {
  /**
   * Two columns:
   *  1. the first sized to content,
   *  2. the second receives the remaining space
   *     (but is never smaller than the minimum size of the board
   *     or the game controls, which occupy this column [Figure 4])
   *
   * Three rows:
   *  3. the first sized to content,
   *  4. the middle row receives the remaining space
   *     (but is never smaller than the minimum height
   *      of the board or stats areas)
   *  5. the last sized to content.
   */
  display: grid;
  grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
  grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* Specify the position of each grid item using coordinates on
 * the 'grid-row' and 'grid-column' properties of each grid item.
 */
#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">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

注: グリッドの構造を指定し、グリッドアイテム の配置やサイズを指定する方法は複数あり、それぞれ異なるシナリオに最適化されています。

1.1.2. ソース順序の独立性

前述の例を続けると、著者はゲームを異なるデバイスに適応させたいと考えています。 また、ゲームはポートレートとランドスケープのいずれの向きでもコンポーネントの配置を最適化するべきです（図6および図7）。 グリッドレイアウトとメディアクエリを組み合わせることで、 著者は同じ意味的なマークアップを使用しつつ、ソース順序に依存せずに要素のレイアウトを並べ替えることができ、 両方の向きで望ましいレイアウトを実現できます。

次の例は、グリッドレイアウトがグリッドアイテムが占める領域に名前を付ける能力を使用している例です。 これにより、グリッド定義が変更されても著者はグリッドアイテムのルールを書き換える必要を避けられます（grid items）。

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

    /* The rows, columns and areas of the grid are defined visually
     * using the grid-template-areas property.  Each string is a row,
     * and each word an area.  The number of words in a string
     * determines the number of columns. Note the number of words
     * in each string must be identical. */
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";

    /* The way to size columns and rows can be assigned with the
     * grid-template-columns and grid-template-rows properties. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
}

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

    /* Again the template property defines areas of the same name,
     * but this time positioned differently to better suit a
     * landscape orientation. */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

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

/* The grid-area property places a grid item into a named
 * area of the grid. */
#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">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

注: グリッドレイアウトの並べ替え機能は意図的に 視覚的なレンダリングのみ に影響し、音声順序やナビゲーションはソース順序に基づきます。 これにより、著者は視覚的なプレゼンテーションを操作しつつ、ソース順序を非 CSS ユーザーエージェントや音声／逐次ナビゲーションのような線形モデルに最適化されたままにできます。

グリッドアイテムの配置と並べ替えは正しいソース順序の代替として使用してはなりません。そうすると文書のアクセシビリティが損なわれる可能性があります。

1.2. 値の定義

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

各プロパティの定義に列挙されているプロパティ固有の値に加えて、 本仕様で定義されるすべてのプロパティは CSS-wide keywords もプロパティ値として受け入れます。 可読性のためにそれらはここでは繰り返して明示していません。

2. 概要

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

グリッドレイアウトは、グリッドを用いて コンテンツの配置を制御します： 水平線と垂直線が交差して、グリッドコンテナの 内容のためのサイズおよび配置の座標系を作り出します。 グリッドレイアウトの特徴は次のとおりです：

• 固定、柔軟、およびコンテンツベースのトラックサイズ指定関数
• 正および負の数値グリッド座標、命名されたグリッド線、命名されたグリッド領域を用いた明示的なアイテム配置; 空いている領域への自動配置（ order による並べ替えを含む）
• スペースに敏感なトラックの繰り返しと、追加のコンテンツに対応するための行または列の自動追加
• マージン、ガター、および 整列プロパティ による整列と間隔の制御
• コンテンツの重なりを許可し、 z-index によるレイヤー制御が可能であること

グリッドコンテナはネストしたり、 必要に応じてフレックスコンテナと組み合わせてより複雑なレイアウトを作成できます。

2.1. グリッドの宣言

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

2.2. アイテムの配置

グリッドコンテナの内容は、 個々のグリッドアイテム（フレックスアイテムに相当）に整理され、 それらはグリッド内の定義済みの領域に割り当てられます。 アイテムはgrid-placement プロパティを通じて座標で明示的に配置することも、 自動配置を用いて空き領域に暗黙的に配置することもできます。 § 8 グリッドアイテムの配置

grid-area: a;          /* Place into named grid area “a”     */
grid-area: auto;       /* Auto-place into next empty area    */
grid-area: 2 / 4;      /* Place into row 2, column 4         */
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                       /* Place using named lines            */

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-area: a;
/* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */

grid-area: 1 / 3 / -1;
/* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */

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

一度 グリッドアイテム が 配置されると、 グリッドトラック（行および列）のサイズが計算され、 定義で指定されたようにその内容や利用可能なスペースのサイズが考慮されます。

結果としてサイズが決定されたグリッドは、グリッドコンテナ内で コンテナの align-content および justify-content プロパティに従って整列されます。 § 11 整列と間隔

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. グリッドレイアウトの概念と用語

グリッドレイアウトでは、 グリッドコンテナの内容が グリッド に配置・整列されてレイアウトされます。 グリッドは水平および垂直のグリッド線の交差する集合で、グリッドコンテナの空間を グリッド領域に分割し、 そこに グリッドアイテム（グリッドコンテナの内容を表す）が配置できます。 グリッド線は二つの集合があります： ブロック軸に沿って走る列を定義する集合（列）と、 インライン軸に沿って直交する集合で行を定義する（行）。[CSS3-WRITING-MODES]

3.1. グリッド線

グリッド線はグリッドの水平および垂直の分割線です。 グリッド線は列または行の両側に存在します。 グリッド線は数値インデックスで参照することも、 著者が指定した名前で参照することもできます。 グリッドアイテムは、グリッド線を参照して グリッド内での位置を決定し、grid-placement プロパティを用いて配置します。

#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; }

/* equivalent layout to the prior example, but using named lines */
#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. グリッドトラックとセル

グリッドトラック は グリッド列 または グリッド行 の一般的な呼称で、隣接するグリッド線の間の空間を指します。 各グリッドトラックにはサイズ指定関数が割り当てられ、 列または行がどれだけ広がるか／高くなるかを制御し、それによってそれを囲むグリッド線の間隔が決まります。 隣接するグリッドトラックはガターで分離されることはありますが、それ以外は密に詰められます。

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

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

3.3. グリッド領域

グリッド領域は、1つ以上のグリッドアイテムのレイアウトに使われる論理的な空間です。 グリッド領域は、1つ以上の隣接するグリッドセルから構成されます。 グリッド領域の各辺には1本ずつ、計4本のグリッドラインで囲まれており、 その領域が交差するグリッドトラックのサイズ指定にも参加します。 グリッド領域は、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; }

グリッドアイテムのグリッド領域は、そのアイテムがレイアウトされる包含ブロックを形成します。 同じグリッド領域に配置されたグリッドアイテム同士は直接的に互いのレイアウトに影響を与えません。 しかし間接的には、グリッドトラック に intrinsic sizing function があり、 そのトラックを占めるグリッドアイテムがトラックのサイズ（およびそれにより囲まれるグリッド線の位置）に影響を与えることがあり、 それが別のグリッドアイテムの位置やサイズに影響を与えることがあります。

3.4. ネストされたアイテムとサブグリッド

グリッドアイテム自身が グリッドコンテナになることがあり、 そのために display: grid を与えます。 一般的には、この ネストされたグリッド の内容のレイアウトは、 それが参加する 親グリッド のレイアウトとは独立します。

しかし、複数の グリッドアイテム の内容を相互に揃える必要がある場合があります。 ネストされたグリッド はその行および／または列の定義を親のグリッドコンテナに委ねることができ、 これを サブグリッド と呼びます。 この場合、サブグリッド のグリッドアイテムは 親グリッド のサイズ決定に参加し、 両方のグリッドの内容を揃えることを可能にします。 詳しくは § 9 サブグリッド を参照してください。

サブグリッド は subgrid キーワードによって確立されます（grid-template-rows または grid-template-columns のいずれか）。 そして軸のいずれかまたは両方で subgridded することができます。 サブグリッド化された軸を持たないグリッドは スタンドアローングリッド です。

<ul>
  <li><label>Name:</label> <input name=fn>
  <li><label>Address:</label> <input name=address>
  <li><label>Phone:</label> <input name=phone>
</ul>

ul {
  display: grid;
  grid: auto-flow / auto 1fr;
}
li {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  border: solid;
}
label {
  grid-column: 1;
}
input {
  grid-column: 2;
}

4. 再配置とアクセシビリティ

グリッドレイアウトは著者に文書の視覚的な再配置に強力な手段を与えます。 しかし、これらは文書ソースの正しい順序に代わるものではありません。 order プロパティおよび grid placement は、視覚以外のメディア（例えば 音声）における順序に影響を与えません。 同様に、グリッドアイテムを視覚的に並べ替えても、 （リンクを順にたどるなどの）逐次的なナビゲーションモードのデフォルトの巡回順序には影響しません（例: tabindex [HTML]）。

著者はコンテンツの論理的な並べ替えではなく視覚的な並べ替えのためにのみ、order および grid-placement properties を使用しなければなりません。 これらの機能を論理的な並べ替えに用いるスタイルシートは適合していません。

注: これは、通常コンテンツを線形に提示する非視覚的メディアや非 CSS ユーザーエージェントが 論理的なソース順序に依存できるようにするためであり、 一方でグリッドレイアウトの配置および順序付け機能は視覚的な配置を調整するために用いられます。 （視覚的な知覚は二次元的で非線形であるため、望ましい視覚順序が必ずしも望ましい読み順と等しいとは限りません。）

多くのウェブページはマークアップ上で似た形状を持っており、 上部にヘッダー、下部にフッターがあり、 中央にコンテンツ領域と左右に1つまたは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) {
  /* 三列を維持するには狭すぎる場合 */
  body { display: block; }
}

著者の意図する順序をすべての提示モードで保持するために、 WYSIWYG エディタやウェブベースの作成支援ツールを含むオーサリングツールは、基盤となる文書ソース自体を並べ替える必要があり、 再配置を行うために order や grid-placement properties を用いてはならない（ただし著者が視覚順序とスピーチやナビゲーションの順序を
明示的に 同期しない ことを示している場合は除く）。

5. グリッドコンテナ

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

grid

この値は要素に グリッドコンテナ ボックスを生成させます。これは フロー レイアウト内に置かれたときに ブロックレベル になります。

inline-grid

この値は要素に グリッドコンテナ ボックスを生成させます。これは フロー レイアウト内に置かれたときに インラインレベル になります。

グリッドコンテナ が サブグリッド でない場合、その内容に対して 独立した グリッドフォーマッティングコンテキスト を確立します。 これは独立した ブロックフォーマッティングコンテキスト を確立することと同様ですが、ブロックレイアウトの代わりにグリッドレイアウトが用いられます: フロートはグリッドコンテナ内に侵入せず、 グリッドコンテナのマージンはその内容のマージンと折り畳まれません。 グリッドコンテナ の内容は グリッド にレイアウトされ、 グリッド線 が各 グリッドアイテム の包含ブロックの境界を形成します。

通常のネストされたグリッドとは異なり、 サブグリッド の内容は親の グリッドフォーマッティングコンテキスト に参加します； したがってサブグリッドは独立したフォーマッティングコンテキストを確立しません。

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

• float および clear は グリッドアイテム に対して効果を持ちません。 ただし float プロパティはグリッドコンテナの子に対する display の計算値に影響します。 これは グリッドアイテム が決定される 前 に発生するためです。
• vertical-align はグリッドアイテムには効果がありません。
• ::first-line および ::first-letter 疑似要素は グリッドコンテナ には適用されず、 グリッドコンテナ は祖先に対して最初の整形行や最初の文字を寄与しません。

要素の指定された display が inline-grid であり、その要素がフロートされているか絶対配置されている場合、 display の計算値は grid になります。 したがって CSS 2.1 第9.7節 の表は修正され、 "Specified Value" 列に inline-grid、 "Computed Value" 列に grid を含む追加行が加えられます。

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

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

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

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

インラインおよびブロックの両方のフォーマッティングコンテキストにおいて、 グリッドコンテナ の auto の block size はその 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 に切り詰められ、領域はその側の最後の グリッドトラック に再配置されなければなりません。

.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">

  <!-- grid item: block child -->
  <div id="item1">block</div>

  <!-- grid item: floated element; floating is ignored -->
  <div id="item2" style="float: left;">float</div>

  <!-- grid item: anonymous block box around inline content -->
  anonymous item 3

  <!-- grid item: inline child -->
  <span>
    item 4
    <!-- grid items do not split around blocks -->
    <q style="display: block" id=not-an-item>item 4</q>
    item 4
  </span>
</div>

注: 要素間の空白（inter-element white space）は消えます: それ自体が別のグリッドアイテムになることはなく、 それでも要素間のテキストは 匿名のグリッドアイテム にラップされる点に注意してください。

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

6.1. グリッドアイテムの表示（Grid Item Display）

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

要素の最も近い祖先要素の 計算済み の display 値が （display:contents の祖先を飛ばして）grid または inline-grid の場合、 その要素自身の display 値は blockified（ブロック化） されます。 （この種の display 値の変換については CSS2.1 §9.7 や CSS Display 3 § 2.7 Automatic Box Type Transformations を参照してください。）

注: 要素が grid または inline-grid であっても、 その要素が replaced であるか、または display: none のサブツリーにある場合など、 実際に グリッドコンテナ ボックスを生成しない場合でも、ブロック化は発生します。

注: 通常、ある display の値は元のボックスの周りに匿名ボックスを生成します。 もしそのようなボックスが グリッドアイテム である場合、 まずブロック化されるため、匿名ボックスの生成は行われません。 例えば、連続する二つの グリッドアイテム が display: table-cell を持つ場合、それらは単一の匿名テーブルでラップされる代わりに、 二つの別々の display: block の グリッドアイテム として扱われます。

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

グリッドアイテム はその グリッド領域 によって定義される包含ブロック内でサイズ決定されます。

グリッドアイテム の、ある次元における 自動サイズ の計算は、 そのアイテムの 自己整列（self-alignment）値 により異なります:

normal

もしグリッドアイテムが該当軸において 優先アスペクト比 を持たず、 かつ（置換要素でない限り）該当軸における 自然サイズ を持たない場合、 そのグリッドアイテムは align-self: stretch と同様にサイズ決定されます。

それ以外の場合は、対応する軸に対するブロックレベル要素のサイズ計算ルールに従ってサイズ決定されます。 （詳細は CSS 2 § 10 Visual formatting model details を参照。）

stretch

非置換ボックスに対する インラインサイズ の計算ルールを使用します （CSS 2 § 10.3.3 Block-level, non-replaced elements in normal flow に定義されている）、 つまり stretch-fit サイズ を使用します。

注: これは、もしアイテムが 優先アスペクト比 を持ち、かつ他方の軸でもサイズが制約される場合に アスペクト比が歪む可能性があることを意味します。

その他すべての値

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

注: auto 値は min-width および min-height において、該当軸のトラックサイズ決定に影響を与えます（これは flex item のメインサイズに対する影響と類似しています）。 詳しくは § 6.6 グリッドアイテムの自動最小サイズ を参照してください。

6.3. 再配置されたグリッドアイテム: order プロパティ

order プロパティは グリッドアイテム にも適用されます。 これはそれらの 自動配置 および 描画順（painting order） に影響します。

フレックスアイテムの再配置と同様に、 order プロパティは 視覚上の順序を音声やナビゲーションの順序と 同期させない 必要がある場合にのみ使用すべきであり、 そうでない場合は基礎となる文書ソース自体を並べ替えるべきです。 詳細は CSS Flexbox 1 § 5.4.1 Reordering and Accessibility を参照してください。

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

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

グリッドアイテム上のパーセンテージ指定のマージンおよびパディングは、ブロックボックスの場合と同様に それらの包含ブロックの インラインサイズ に対して解決されます（例えば左右/上/下のパーセンテージは水平書字モードでは包含ブロックの 幅 に対して解決されます）。

auto マージンは対応する次元の余分なスペースを吸収して拡張するため、整列に使用できます。 詳しくは § 11.2 auto マージンによる整列 を参照してください。

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

グリッドアイテム は、交差する グリッド領域 に配置されたときや、負のマージンや位置指定によって非交差領域に配置された場合でも重なり得ます。 グリッドアイテムの描画順はインラインブロックの場合とまったく同じであり [CSS2] と同等ですが、 生の文書順の代わりに order によって修正された文書順 が使われ、 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 がスクロール可能なオーバーフロー値ではないこと

• そのアイテムが該当軸で少なくとも一つのトラックを スパン しており、そのトラックの 最小トラックサイズ関数 が auto であること

• もしそのアイテムがその軸で複数のトラックをスパンしている場合、それらのトラックのいずれもが 柔軟（flexible） でないこと

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

注: コンテンツベースの最小サイズ は 内在的サイズの寄与 の一種であり、 したがって CSS Sizing 3 § 5.2 Intrinsic Contributions の規定が適用されます。

コンテンツベースの最小サイズ は、 ある次元における グリッドアイテム の 指定サイズ提案 が存在する場合はそれを使用し、 そうでなければ置換要素かつ 転送サイズ提案 が存在する場合はそれを用い、 それ以外は コンテンツサイズ提案 を使用します。 ただし、もしその次元において該当のグリッドアイテムが固定の 固定サイズ関数 を持つ 最大トラックサイズ関数 のみをスパンしているならば、 その次元における 指定サイズ提案 と コンテンツサイズ提案（およびこれが反対軸への 転送サイズ提案 へ与える入力）は、 その グリッド領域 の最大サイズにストレッチフィットした値（これらのトラックの max track sizing functions の合計および介在する固定の ガター を合計したもの）より大きくならないようにさらにクランプされます。

いかなる場合でも、そのサイズ提案は該当軸の 最大サイズ によって追加でクランプされます（もしそれが 定義済み ならば）。 アイテムが 圧縮可能な置換要素 であり、 該当軸において 定義済み の 優先サイズ または 最大サイズ を持つ場合、 サイズ提案はそれらのサイズによって上限が設定されます; この目的のため、これらのサイズに含まれる不定のパーセンテージは 0 に対して解決され（定義済みと見なされ）、クランプに使用されます。

注: fit-content() の引数は、コンテンツベースの最小サイズ を 固定トラックの max track sizing function と同じ方法でクランプしません。

この計算で使用される コンテンツサイズ提案, 指定サイズ提案, および 転送サイズ提案 は、 該当する min/max/優先サイズプロパティを考慮に入れており、コンテンツベースの最小サイズ が 著者が指定した制約を妨げないようになっています。これらは以下で定義されます:

指定サイズ提案

もしアイテムの該当軸における 優先サイズ が 定義済み であれば、 指定サイズ提案 はそのサイズです。 それ以外の場合は未定義です。

転送サイズ提案

もしアイテムが 優先アスペクト比 を持ち、反対軸におけるその 優先サイズ が 定義済み であれば、 転送サイズ提案 はそのサイズです （もし反対軸の最小/最大サイズが定義済みならそれによってクランプされます）をアスペクト比を通じて変換したものです。 それ以外の場合は未定義です。

もしアイテムが該当軸において 定義済み の 優先サイズ または 最大サイズ を持つ場合、 転送サイズ提案 はそれらのサイズによって上限が設定されます; この目的のため、これらのサイズに含まれる不定のパーセンテージは 0 に対して解決され（定義済みと見なされ）、クランプに使用されます。

コンテンツサイズ提案

コンテンツサイズ提案 は 該当軸における min-content サイズ であり、 もし優先アスペクト比がある場合は、それを反対軸の定義済みの最小/最大サイズによってアスペクト比を通じてクランプします。

ボックスの内在的サイズ（例えばボックスの min-content サイズ） を計算する目的では、 コンテンツベースの最小サイズ はその軸におけるボックスのサイズを不確定（indefinite）にします （たとえそのボックスの width が定義済みサイズを指定していても）。 これは、このサイズに対して計算されたパーセンテージが auto として振る舞う ことを意味します。

内在的サイズの計算以外の目的においては、コンテンツベースの最小サイズ（明示的な min-content 等とは異なり）はボックスのサイズを不確定にすることを強制しません。 ただし、もしこの最小値が適用される前にそのボックスのサイズに基づいて解決されたパーセンテージがある場合、 そのパーセンテージは適用後に再解決されなければなりません。

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つの グリッドライン を持ちます。

grid-placement プロパティ の数値インデックスは 明示的グリッド の端から数えます。 正のインデックスは 開始 側から数え （開始 側の最初の 明示的 ラインは1から）、 負のインデックスは 終了 側から数えます （終了 側の最も端の 明示的 ラインは-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

このプロパティによって 明示的 なグリッドトラックは作成されません （ただし 明示的グリッド トラックは grid-template-areas によって作成されることがあります）。

注: 明示的グリッド が存在しない場合、行・列は 暗黙的に生成 され、 そのサイズは grid-auto-rows および grid-auto-columns プロパティによって決定されます。

<track-list> | <auto-track-list>

トラックリスト を 一連の トラックサイズ指定関数 と ライン名 として指定します。 各 トラックサイズ指定関数 は、長さ、グリッドコンテナのサイズに対するパーセンテージ、 列や行に占めるコンテンツの寸法、またはグリッド内の空き領域の割合として指定できます。 また minmax() 記法を使って範囲指定も可能です。 これにより、列や行ごとに 最小 と 最大トラックサイズ指定関数 を個別に指定できます。

subgrid <line-name-list>?

subgrid 値は、その軸で 親グリッド の 範囲部分を継承することを示します（subgridded 軸）。 サイズは明示的に指定せず、 グリッドの行・列サイズは 親グリッド の定義から取得され、 subgrid のアイテムは 固有サイズの計算（CSS Grid Layout 1 § 11.5 固有トラックサイズの解決） に参加します。 本質的には、subgrid はネストされた要素間でグリッドパラメータを伝播し、 コンテンツベースのサイズ情報を 親グリッド へ返す機能を提供します。

<line-name-list> 引数を使うと、 親グリッド と共有されるグリッドラインにローカル名を割り当てることができます： <line-name-list> が指定された場合、 指定された <line-names> が subgrid の 明示的グリッド の各ラインに1つずつ割り当てられます（1番目のラインから）。 余分な <line-names> は無視されます。

親グリッド が存在しない場合や、 グリッドコンテナ が 独立フォーマットコンテキスト を強制される場合 （レイアウト封じ込め [CSS-CONTAIN-2] や 絶対配置 [CSS-POSITION-3] など）、 使用値 は 初期値 none となり、 グリッドコンテナ は subgrid にはなりません。

subgridded でない軸は 単独軸 です。

トラックリスト の構文は次のとおりです：

<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>?

<line-name-list>      = [ <line-names> | <name-repeat> ]+
<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> 値も指定でき、トラックの フレックス係数 になります。 最小値としては無効です。

注: 将来の仕様レベルでは最小値にも <flex> を許可する可能性があり、 トラックサイズ指定アルゴリズム もそれに対応するよう更新されます。

auto

最大値 の場合：max-content contribution の最大値を表しますが、 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 contribution の最大値を表します。

min-content

min-content contribution の最大値を表します。

fit-content( <length-percentage> )

次の式を表します： max(minimum, min(limit, max-content)) ここで minimum は auto の最小値（多くの場合 min-content 最小値と等しい）、 limit は トラックサイズ指定関数 で fit-content() に渡された引数です。 実質的には minmax(auto, max-content) と minmax(auto, limit) の小さい方として計算されます。

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

/* 有効なトラック定義の例 */
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-placement プロパティ の理解や保守がしやすくなります。 ライン名 は 明示的割り当てライン名 として grid-template-rows や grid-template-columns で割り当てるか、 暗黙的割り当てライン名 として named grid area を 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() 記法は トラックリスト の一部を繰り返す表現で、 多数の列や行で繰り返しパターンがある場合に、より簡潔に記述できます。

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>? )
<name-repeat> = repeat( [ <integer [1,∞]> | auto-fill ], <line-names>+)

• <track-repeat> バリアントは 任意の<track-size> の繰り返しを表現できますが、 繰り返し回数は固定です。

• <auto-repeat> バリアントは スペースを埋めるため自動的に繰り返しますが、 繰り返し回数の計算のため確定サイズのトラックが必要です。 トラックリスト内で1回のみ出現可能ですが、 同じトラックリストには<fixed-repeat>も含められます。

• <name-repeat> バリアントは subgrid にライン名を付与するためのものです。 subgrid キーワードと 組み合わせてのみ使用でき、トラックサイズは指定できず、ライン名のみ指定します。

repeat() 関数（<name-repeat>以外）が 2つの<line-names>を隣接して配置する場合、 名前リストは結合されます。 例えば repeat(2, [a] 1fr [b]) は [a] 1fr [b a] 1fr [b] と等価です。

7.2.3.2. 詰めるための繰り返し: auto-fill および auto-fit の繰り返し

subgridded axis においては、 auto-fill キーワードは <line-name-list> ごとに一度だけ有効であり、 名前リストと subgrid で指定されたgrid span が一致するまで繰り返されます （spanがすでに満たされていれば0回になります）。

それ以外、standalone axis では、 繰り返し回数として auto-fill が指定された場合、 grid container の該当軸に 確定したpreferred size や 最大サイズがある場合、 grid がその content box をオーバーフローしない最大の正の整数が繰り返し回数となります （gap も考慮）。 どの回数でもオーバーフローする場合は1回のみ。 それ以外、grid container に該当軸の 確定した最小サイズがある場合は その最小要件を満たす最小の正の整数が繰り返し回数になります。 それ以外は、指定されたトラックリストは1回だけ繰り返されます。

この目的のため、 各トラックはその最大トラックサイズ指定関数が確定していればそれとして、 そうでなければ最小トラックサイズ指定関数が確定していればそれとして扱います。 両方が確定している場合は 最大トラックサイズ指定関数 を 最小トラックサイズ指定関数 で切り捨てます。 いずれも確定していない場合は繰り返し回数は1です。

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

auto-fit キーワードは auto-fill と同様に動作しますが、 グリッドアイテム配置 の後、空の繰り返しトラックは折りたたまれます。 空のトラックとは、in-flow のグリッドアイテムが配置されていない、または跨いでいないトラックです。 （すべてのトラックが空の場合、すべてが折りたたまれます。）

折りたたみグリッドトラック は、トラックサイズ指定関数が 0px であるものと扱われ、 両側のガター（分配アライメントによるスペースも含む）は折りたたまれます。

standalone axis で 自動繰り返しトラック数を計算するため、UAはゼロ除算を避けるためにUA指定値へトラックサイズを切り捨てなければなりません。 この切り捨て値は 1px を推奨します。

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

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

7.2.4. 柔軟長さ：fr 単位

柔軟長さ または <flex> は fr 単位による寸法で、 grid container の残りスペースの割合を表します。 fr 単位でサイズ指定されたトラックは 柔軟トラック と呼ばれ、残りスペースに応じて伸縮します。これは flex item が flex container 内でゼロ基準サイズで空間を埋める挙動と似ています。

残りスペース の分配は 非柔軟なトラックサイズ指定関数が最大まで達した後に行われます。 その行や列の合計サイズが利用可能スペースから差し引かれ、残りスペースとなり、 フレックスサイズの行や列にフレックス係数の比率で分配されます。

各列・行の残りスペースの割合は次の式で算出できます： <flex> * <leftover space> / <すべての フレックス係数 の合計>

利用可能スペースが無限大の場合 （grid container の幅または高さが 未確定の場合）、 フレックスサイズのグリッドトラックは 内容に合わせつつ比率を保持したサイズになります。 各フレックスサイズの グリッドトラック の使用サイズは max-content サイズを フレックス係数で割った「仮想1frサイズ」として算出し、 その最大値を 1fr の解決値（flex fraction）とし、 各グリッドトラックのフレックス係数を掛けて最終サイズとします。

注: <flex> 値は <length> ではなく （また <length> や一部の <percentage> 値とも互換性がありません）、 calc() 式で他の単位型と 組み合わせたり表現することはできません。

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

非subgrid軸の 算出済みトラックリスト は、 リストで、 ライン名セットとトラックセクションが交互に並び、 最初と最後の項目はライン名セットです。

ライン名セットは （空でもよい）識別子集合で、ライン名を表します。

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

• 1つのトラックサイズを表す minmax() 関数記法。 各<length-percentage>は算出済み （算出済みトラックサイズ）。

• 繰り返しトラックリストセクションを表す repeat() 関数記法。 その<integer>は算出済み、 <track-list>は算出済みトラックリストとして表現 （算出済みrepeat記法）。

算出済みトラックリストの subgrid軸は subgrid キーワードに続き、 その軸で指定されたライン名を表すリスト（ライン名セットと算出済みrepeat記法）となります。

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

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

7.2.6.1. 単独トラックリストの解決値

要素がグリッドコンテナボックスを生成するとき、 解決値としての grid-template-rows や grid-template-columns プロパティは 単独軸の場合、 使用値 を次のようにシリアライズします：

• すべてのトラックを個別に列挙（暗黙・明示とも）、repeat()記法は使わない。
• すべてのトラックサイズは関数に関係なくピクセル単位の長さで示される。
• 隣接するライン名は一つの角括弧セットにまとめられる。

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

それ以外の場合（例：要素が 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.2.6.2. subgridトラックリストの解決値

要素が グリッドコンテナボックスで subgrid の場合、 解決値としての grid-template-rows と grid-template-columns プロパティは 使用された列数を表し、 subgridキーワードに続き、 各ラインを ライン名セットとして 明示的に subgridで定義されたすべての名前（親グリッドから引き継いだものは含まない）を repeat()記法を使わずにリスト化します。

specified: subgrid [a] repeat(auto-fill, [b]) [c]
resolved:  subgrid [a] [b] [b] [b] [c]

specified: subgrid [a] [a] [a] [a] repeat(auto-fill, [b]) [c] [c]
resolved:  subgrid [a] [a] [a] [a] [c]

specified: subgrid [] [a]
resolved:  subgrid [] [a] [] [] []

specified: subgrid [a] [b] [c] [d] [e] [f]
resolved:  subgrid [a] [b] [c] [d] [e]

注: これは本来の 「最短同値のシリアライズ原則」に反しますが、 空の末尾 ライン名セット を シリアライズすることで subgrid が何トラック分跨いでいるか の有用な情報が得られます。

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

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

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

none

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

注: 明示的グリッド が存在しない場合、 行・列は暗黙的に生成され、 サイズは grid-auto-rows と grid-auto-columnsプロパティで決定されます。

<string>+

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

文字列を次のトークンのリストに分割します（最長一致）:

• identコードポイントの連続。 これは 名前付きセル・トークンで、そのコードポイントからなる名前を持つ。
• "."（U+002E FULL STOP）が一つ以上並んだもの。 これは nullセル・トークン。
• 空白の連続。 これは何も表さず（トークンを生成しない）。
• その他任意の文字の連続。 これは ゴミ・トークン。

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

• nullセル・トークンは グリッドコンテナの無名領域を表す。
• 名前付きセル・トークンは 同名の 名前付きグリッド領域を作成する。 行内・行間で複数の名前付きセル・トークンがあっても 対応するグリッドセルを跨ぐ 一つの名前付きグリッド領域となる。
• ゴミ・トークンは構文エラーであり、宣言は無効となる。

すべての文字列は同じ数のセル・トークン （名前付きセル・トークンまたはnullセル・トークン）を含み、 少なくとも一つのセル・トークンが必要です。 そうでなければ宣言は無効です。 また、名前付きグリッド領域が 複数のグリッドセルを跨ぐ場合、 それらセルが一つの矩形で完全に埋まらないと宣言は無効です。

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

#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）一つでシリアライズされ、 連続するセル・トークンはスペース（U+0020 SPACE）一つで区切られ、 その他の空白はすべて省略されます。

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プロパティは ショートハンドであり、 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;

そして以下のようなグリッドが作成されます：

注: repeat()関数はこのトラックリストでは使えません。 トラックが“ASCIIアート”の行・列と一対一で視覚的に揃うことを意図しているためです。

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

7.5. 暗黙グリッド

grid-template-rows、 grid-template-columns、 grid-template-areasは 明示的グリッドを構成する 固定数のトラックを定義します。 グリッドアイテムがこれらの範囲外に配置される場合、 グリッドコンテナは 暗黙グリッドトラックを gridに暗黙グリッドラインとして追加し生成します。 これらのラインと明示的グリッドの組み合わせが 暗黙グリッドとなります。 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 プロパティは、 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>

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

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

row

自動配置アルゴリズムはアイテムを 各行を順に埋めていき、必要に応じて新しい行を追加します。 row も column も指定されていない場合、 rowが既定となります。

column

自動配置アルゴリズムはアイテムを 各列を順に埋めていき、必要に応じて新しい列を追加します。

dense

指定された場合、自動配置アルゴリズムは「dense」詰めアルゴリズムを使い、 後から小さいアイテムが来た場合はグリッド内の隙間を早く埋めるよう試みます。 このため順序が入れ替わる場合がありますが、 より大きいアイテムで空いた穴を後から来た小さいアイテムで埋められるようにします。

省略した場合は「sparse」アルゴリズムが使われ、 配置アルゴリズムはアイテムを配置する際にグリッド内で「前進」しかせず、 隙間を埋めるために後戻りすることはありません。 これにより自動配置アイテムが順番通りに現れることが保証されますが、 後で来たアイテムで埋められる隙間が残ることもあります。

注: 将来のこのモジュールのレベルでは 自動位置指定アイテムを1つの「標準」セルにまとめて流し込む値が追加される予定です。

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

次の例では、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 {
  /* すべての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-rows、 grid-template-columns、 grid-template-areas） と、暗黙グリッドプロパティ （grid-auto-rows、grid-auto-columns、grid-auto-flow） を一括で設定できます。 （gutterプロパティはリセットされません。）

構文は grid-template に加えて、 オートフローグリッドを定義する追加構文があります：

<'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 宣言で 明示的または暗黙グリッドプロパティしか指定できません。 指定しなかったサブプロパティは通常のショートハンド通り初期値にリセットされます。

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

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

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

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

すべてのグリッドアイテムは グリッド領域と結びついています。 これは、グリッドアイテムが占有する隣接するグリッドセルの矩形集合です。 このグリッド領域は、 グリッドアイテムの内で自己整列プロパティ （justify-self および align-self）によって 実際の位置が決まる「包含ブロック」となります。 グリッドアイテムが占有するセルは グリッドの行・列サイズにも影響し、 § 12 グリッドレイアウトアルゴリズムで定義されています。

グリッドアイテムの グリッド領域が グリッド内でどこにあるかは 配置により定義されます。 これはグリッド位置と グリッドスパンから成ります：

グリッド位置

グリッドアイテムの 各軸でのグリッド内の場所。 グリッド位置は 確定（明示的指定） または 自動（自動配置による決定）のいずれかです。

グリッドスパン

グリッドアイテムが 各軸で占有するグリッドトラック数。 その軸のグリッドスパンは 暗黙、 明示、 自動 のいずれかです：

• そのgrid-placementプロパティの *-startと*-end値の両方がラインを指定している場合は グリッドスパンは 暗黙です。

• 明示的なspan値を持つ場合は グリッドスパンは 明示です。

• それ以外はグリッドスパンは 自動です： その軸がsubgriddedの場合は グリッドスパンは line-name-listから決定され、 それ以外はグリッドスパンは1です。

grid-placementプロパティ—​ロングハンド grid-row-start、grid-row-end、grid-column-start、grid-column-end、およびショートハンド grid-row、 grid-column、 grid-area—​により、 作者はグリッドアイテムの 配置を 以下の6つの情報のいずれか（または全く指定しない）で指定できます：

ある次元で 開始・終了・スパン のいずれか2つに確定値があれば、 残りの1つも確定値となります。

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

この節は参考情報です。

grid-placementプロパティのロングハンドは 3つのショートハンドにまとめられています：

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つ分スパンし、7番目まで */
}

8.1.4. 自動配置

グリッドアイテムは 次の空いているグリッドセルに自動的に配置され、 もし空きがなければグリッドが拡張されます。

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

これは例えば、カタログサイトで複数のセール品を グリッドパターンで一覧表示するのに使えます。

自動配置は、アイテムが複数セルを占有したい場合に 明示的なスパンと組み合わせて使えます：

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

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

注: デフォルトでは 自動配置アルゴリズムは グリッドを線形に順次探索し、後戻りはしません。 より大きなアイテムを配置するために空きスペースを飛ばした場合、 そのスペースに戻って埋めることはありません。 この挙動を変えるには、denseキーワードをgrid-auto-flowで指定してください。

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

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

grid-placementプロパティの能力により、 コンテンツはグリッド内で自由に配置・並び替えでき、 視覚的な表示が文書のソース順と大きく乖離することも可能です。 これによって、作者は様々なデバイスや表示モード （例：メディアクエリを使用）に合わせて レンダリングを柔軟に調整できます。 ただし正しいソース順の代わりにはなりません。

正しいソース順は音声、 シーケンシャルナビゲーション（キーボード操作など）、 検索エンジンや触覚ブラウザなどCSS以外のUAにも重要です。 グリッド配置は視覚的な表示だけに影響します！ これにより作者は、非CSS/非視覚的なインタラクションモード用に 文書ソースを最適化しつつ、 グリッド配置技法で視覚表示のみを調整し、 ソース順をそのまま維持できます。

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

<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を<custom-ident>とともに指定したかのように扱います。

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

N番目のグリッドラインを グリッドアイテムの 配置に使います。 負の整数の場合は、明示的グリッドの終端から逆方向で数えます。

名前が<custom-ident>として指定された場合、 その名前を持つラインのみ数えます。 その名前のラインが十分ない場合、 位置決定のためにすべての暗黙グリッドラインが その名前を持つものとして扱われます。

<integer> にゼロを指定すると宣言は無効です。

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

Nライン分グリッドアイテムの グリッド領域の対応する端が 反対側の端からグリッドスパンとして 数えられるようにします。 例：grid-column-end: span 2は grid-column-startラインから2ライン分 終端方向に進んだラインを意味します。

名前が<custom-ident>として指定された場合、 その名前を持つラインのみ数えます。 その名前のラインが十分ない場合、 カウント対象の方向側の明示的グリッド端にある すべての暗黙グリッドラインが その名前を持つものとして扱われます。

次の宣言があるとします：

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

グリッドコンテナは 2つのグリッドライン（1と2）を持つ明示的グリッドです。 グリッドアイテムの column-end端は4番ラインで指定されているため、 暗黙グリッドの終端側に 2つのラインが生成されます。

そのcolumn-start端は、そこから始端方向に見つけられる最初の "foo" ラインでなければなりません。 グリッド内に "foo" ラインはないので、 候補は暗黙グリッド内のラインだけです。 3番ラインは明示的グリッドの終端側なので候補にならず、 span指定は始端方向に検索するため、 暗黙グリッドが明示的グリッドの始端側にラインを生成するしかありません。

<integer> を省略した場合、デフォルトは1です。 負の整数やゼロは無効です。

auto

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

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

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;
/* エラー: 終端スパンは無視され、自動配置アイテムは名前付きラインまでスパンできない。
   ''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-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-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 document orderで処理します。 元の文書順ではありません。

0. 匿名グリッドアイテムの生成（§ 6 グリッドアイテム参照）。 匿名グリッドアイテムは常に自動配置され、 それらのボックスにはgrid-placementプロパティは指定できません。

1. 自動位置指定でないものを配置する。

2. 特定行にロックされたアイテムを処理する。

   確定行位置を持つ 各グリッドアイテム （grid-row-startと grid-row-endプロパティで 確定行位置を定義）について、 order-modified document orderで処理：

   “sparse”パッキング（デフォルト挙動）

   その配置のcolumn-startラインを、 このアイテムのグリッド領域が 他の占有済みセルを重複せず、 かつこのステップで既にこの行に配置済みアイテムの後になる最初（最小正インデックス）のラインに設定します。

   “dense”パッキング（dense指定時）

   その配置のcolumn-startラインを、 このアイテムのグリッド領域が 他の占有済みセルを重複しない 最初（最小正インデックス）のラインに設定します。

3. 暗黙グリッド内の列を決定する。

   暗黙グリッドの列を生成：

   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で終わるため、 暗黙グリッド末尾に 追加列が必要となります。

4. 残りのグリッドアイテムを配置する。

   自動配置カーソルは現在のグリッド「挿入点」を定義し、 行・列グリッドラインのペアとして指定します。 初期値はカーソルは 暗黙グリッドの最先頭行・列です。

   使われているgrid-auto-flow値によって アイテムの配置方法が決まります：

   “sparse”パッキング（デフォルト挙動）

   前のステップで配置されていない各グリッドアイテムについて、 order-modified document orderで：

   アイテムが確定列位置を持つ場合：

   1. カーソルの列位置を アイテムのcolumn-startラインに設定。 これが前回のカーソル列位置より小さければ、行位置を1増やす。

   2. カーソルの行位置を アイテムの占有済みセルと重複しなくなるまで増やす （必要に応じて暗黙グリッドに新しい行を作成）。

   3. アイテムのrow-startラインをカーソルの行位置に設定し、 スパンに従ってrow-endラインも設定。

   アイテムが両軸とも自動位置指定の場合：

   1. 自動配置カーソルの列位置を、 アイテムのグリッド領域が 他の占有済みセルと重複しなくなるまで、 またはカーソル列位置＋アイテムの列スパンが アルゴリズムで決定された暗黙グリッドの列数をはみ出すまで増やす。

   2. 前ステップで重複しない位置が見つかった場合は、 アイテムのrow-start/column-startラインをカーソル位置に設定。 そうでなければ、自動配置カーソルの行位置を増やし （必要なら暗黙グリッドに新しい行を作成）、 列位置を暗黙グリッドの最先頭列にリセットし、前ステップに戻る。

   “dense”パッキング（dense指定時）

   前のステップで配置されていない各グリッドアイテムについて、 order-modified document orderで：

   アイテムが確定列位置を持つ場合：

   1. カーソルの行位置を暗黙グリッドの最先頭行に設定し、 列位置をアイテムのcolumn-startラインに設定。

   2. 自動配置カーソルの行位置を アイテムが他の占有済みセルと重複しない値まで増やす （必要に応じて暗黙グリッドに新しい行を作成）。

   3. アイテムのrow-startラインインデックスをカーソルの行位置に設定 （暗黙的にrow-endもスパンで設定）。

   アイテムが両軸とも自動位置指定の場合：

   1. カーソルの行・列位置を暗黙グリッドの最先頭行・列に設定。

   2. 自動配置カーソルの列位置を、 アイテムが他の占有済みセルと重複しなくなるまで またはカーソル列位置＋アイテムの列スパンが暗黙グリッドの列数をはみ出すまで増やす。

   3. 前ステップで重複しない位置が見つかった場合は、 アイテムのrow-start/column-startラインをカーソル位置に設定。 そうでなければ、自動配置カーソルの行位置を増やし （必要なら暗黙グリッドに新しい行を作成）、 列位置を暗黙グリッドの最先頭列にリセットし、前ステップに戻る。

9. サブグリッド

サブグリッドは通常のグリッドコンテナとほぼ同じように動作しますが、以下の点が異なります:

• サブグリッドを配置すると、そのサブグリッド化されたトラックと 親グリッドで跨いでいるトラックが対応します。 このようにサブグリッドと親の間で共有されるグリッドラインがサブグリッドの明示的グリッドとなり、 トラックサイズは親グリッドによって制御されます。
• サブグリッドのサブグリッド化された次元での明示的トラック数は、 親グリッドで実際に跨いでいるグリッドトラックの数と常に一致します:
  • サブグリッドのグリッドスパンが サブグリッド化された次元で明示または暗黙の場合、 各サブグリッド化された次元の明示的トラック数は その次元の使用されたグリッドスパンから取得します （grid-template-*プロパティは無関係）。
  • 自動グリッドスパンの場合は、 使用されるグリッドスパンは その軸のgrid-template-*プロパティで指定された明示的トラック数で決まり、 最小値は1です。

  注: ここで決まる明示的グリッドは、 サブグリッドの配置が親グリッドによって制限される場合さらに切り詰められることがあります。 「暗黙トラックなし」についても参照。

  grid-template-*プロパティがサブグリッド化された軸で <line-name-list>を指定している場合、 使用値は明示的トラック数に合わせて切り詰められます。

• サブグリッドのグリッドアイテムのgrid-placementプロパティや 使用するライン番号は、サブグリッドでカバーされているラインに限定されます。 サブグリッド外のラインは明示的グリッドから除外されているのと同じ扱いです。 例えば、数値インデックスはサブグリッドの最初のラインから数えます（親グリッドの最初のラインからではありません）。

  ライン番号や配置規則は サブグリッド自身の書字モードに従います。これは入れ子独立グリッドと同じです。

• サブグリッドは、内容が配置される前に自身が配置され得るため、 サブグリッド化されたラインは親グリッドの 対応するラインで指定された明示的ライン名を自動で継承します。

  これらの名前は サブグリッドでローカルに指定されたライン名に 加えて付与されます。

• サブグリッドが親で名前付きグリッド領域と重なる場合 （grid-template-areas宣言で生成されたもの）、 親の名前付きグリッド領域をサブグリッド内で表すために 暗黙的割り当てライン名が付与されます。

  注: 名前付きグリッド領域がサブグリッドと部分的にしか重ならない場合、 その領域を表すため、サブグリッドの最初と最後のラインに暗黙的割り当てライン名が割り当てられます。 そのためサブグリッドのライン名割り当てと親グリッドのライン名割り当てが必ずしも一致しない場合があります。

  これらの名前もまた サブグリッドでローカルに指定されたライン名に 加えて付与されます。

  次の例では、 4列の祖父グリッドには明示的なライン名と grid-template-areasによって生成される暗黙的ライン名があります:

  <style type="css">
    .outer {
      display: grid;
      grid-template-columns:
        [outer-edge] 20px [main-start] 1fr [center] 1fr max-content [main-end];
      grid-template-areas:
        "gutter info info photos";
    }
    .middle {
      grid-column: main-start / main-end;
      display: grid;
      grid: subgrid / subgrid;
    }
    .inner {
      grid-column: center / -1;
      display: grid;
      grid: subgrid / subgrid;
    }
  </style>
  
  <div class="outer">
    <div class="middle">
      <div class="inner">&hellip;</div>
    </div>
  </div>
  

  すべての名前解決後、 各グリッドの名前は以下のようになります:

  .outer = [outer-edge gutter-start] [gutter-end info-start main-start] [center] [info-end photos-start] [main-end photos-end]
  .middle = [info-start main-start] [center] [info-end photos-start] [main-end photos-end]
  .inner = [center info-start] [info-end photos-start] [main-end photos-end]
  

  全ての明示的ライン名は .inner にも継承されますが、 暗黙的割り当てライン名は 各サブグリッドが元の 名前付きグリッド領域と重なる範囲で計算されます。

• サブグリッドはサブグリッド化された次元で暗黙グリッドトラックを持ちません。 仮想的な暗黙グリッドラインは 配置解決のために通常通り使われますが、 各グリッドアイテムの グリッド領域は サブグリッドの明示的グリッドにクランプされます （大きすぎるグリッドでのクランプ手順と同じ）。
  例えば、 span 1サブグリッドに グリッドアイテムが grid-column: 2 / span 3; で指定された場合、 そのアイテムはサブグリッドの最初（唯一）のトラックに強制的に配置され制限されます。

  注: 親もサブグリッドで固定トラック数の場合、 サブグリッドは予想より少ないトラック数になることがあります。 （親がUAのグリッドトラック上限に達している場合も同様です。）

• サブグリッド自身は 親グリッド内の 普通のグリッドアイテムとしてレイアウトされますが、 サブグリッド化された次元ではトラックサイズ計算上「完全に空」であるかのように振る舞います。
• サブグリッドのグリッドアイテムは サブグリッド化された次元で親グリッドの サイズ計算に参加し、その次元で揃えられます。

  この過程で、サブグリッドの margin、padding、スクロールバーガター、borderの合計が各端で その端のアイテムに追加の（場合によっては負の）margin層として適用されます。 この追加の「margin」層は サブグリッドが多段でも累積します。

  例えば、次のような3×3グリッドがあるとします:

  #parent-grid { grid-template-columns: 300px auto 300px; }

  サブグリッドが最後の2トラックをカバーする場合、 サブグリッドの最初の2列は親グリッドの最後の2列に対応し、 そのトラックに配置されたアイテムは親グリッドのサイズ計算にも参加します。 具体的には、サブグリッドの最初のトラックに配置されたアイテムは 親グリッドの中央トラックの自動サイズに影響します。

  #subgrid { grid-column: 2 / span 2; } /* 親の2番目・3番目トラックをカバー */
  #subgrid > :first-child { grid-column: 1; } /* サブグリッドの1番トラック＝親グリッドの2番トラック */
  

  サブグリッドにmargin/border/paddingがある場合は それらのサイズもサイズ計算に影響します。 例えばサブグリッドに100pxのpaddingがある場合:

  #subgrid { padding: 100px; }

  この場合、サブグリッドの1番トラックのグリッドアイテムは 上・左・下に追加で100pxのmarginがあるかのように扱われ、 親グリッドのトラックのサイズ計算やグリッドアイテム自身の位置に影響します。

  一方で、 サブグリッドのガター (row-gap／column-gap) と親グリッドのガターの差の半分が 端以外のアイテムに追加のmargin層として適用されます。 このmargin層も多段サブグリッドで累積します。 normal値は サブグリッドが親グリッドと同じサイズのガターを持つことを示し、 つまり差分はゼロです。

  注: 最終的には親グリッドのトラックが指定通りにサイズされ、 サブグリッドのガターが 視覚的に親グリッドのガターと中央揃えされます。

  例えば、300px幅の外側グリッドがあり gapが50px、列が100px 1frと指定されている場合、 両トラックを跨ぐサブグリッドは…

  … column-gapがnormal（または50px）の場合:

  • 左列のグリッドアイテムは特別な調整なしで100px幅に伸び、 サブグリッドの左端に揃えられる。
  • 右列のグリッドアイテムも特別な調整なしで150px幅に伸び、 サブグリッドの右端に揃えられる。
  • アイテム間の見た目上のガターは50pxで親グリッドと一致。

  

  … column-gapが0の場合:

  • 左列アイテムは右marginが-25pxとして扱われ、125px幅に伸び左端に揃う。
  • 右列アイテムは左marginが-25pxとして扱われ、175px幅に伸び右端に揃う。
  • アイテム間のガターは0pxで、column-gapで指定された通り。

  

  … column-gapが25pxの場合:

  • 左列アイテムは右marginが-12.5pxとして扱われ、112.5px幅に伸び左端に揃う。
  • 右列アイテムは左marginが-12.5pxとして扱われ、162.5px幅に伸び右端に揃う。
  • アイテム間のガターは25pxで、column-gapで指定された通り。

  

  … column-gapが75pxの場合:

  • 左列アイテムは右marginが12.5pxとして扱われ、87.5px幅に伸び左端に揃う。
  • 右列アイテムは左marginが12.5pxとして扱われ、137.5px幅に伸び右端に揃う。
  • アイテム間のガターは75pxで、column-gapで指定された通り。

  

• 非空のサブグリッドの各端について、 サブグリッドのmargin/border/padding（およびスクロールバーガター）を考慮するため、 トラックサイズ計算アルゴリズムに仮想アイテムが追加されます。 これはその端に最も近い占有トラックへスパンでまたがるアイテム集合ごとに追加されます。 仮想アイテムのサイズは、各スパンサイズごとに最大のアイテムのサイズに サブグリッド自身の端のmargin/border/padding/gutterを加えたものです。 仮想アイテムのスパンも同じ実アイテムのスパンに、 その端までの空トラック数を加えた値になります。

  注: サブグリッドの端に実アイテムがある場合は この手順は省略でき、既に前述のmargin/border/padding処理が反映済みです。

  例えば次のサブグリッドレイアウトの場合:

  5px auto auto 5px
  .   aaaaaaaaa .
  .   bbbb cccc .
  

  サブグリッドアイテムa, b, cがそれぞれのグリッド領域を占有し、 サブグリッドに25pxのパディングがある場合、 サブグリッドのインライン開始パディング処理のため、 トラックサイズ計算アルゴリズムに2つの仮想アイテムが追加されます: 1つはbのサイズ＋25pxで最初の2列をスパン、 もう1つはaのサイズ＋25pxで最初の3列をスパン。

• サブグリッドはサブグリッド化された次元で常に伸縮されます: align-self/justify-selfプロパティは無視され、 width/height等の制約も無視されます。
• レイアウト上はサブグリッドのグリッドは 必ず親グリッドの対応部分に揃えられます。 align-content/justify-contentプロパティも サブグリッド化された次元では無視されます。
• overflowプロパティはサブグリッドに適用されます。 そのためサブグリッドの内容があふれる場合スクロール可能です。 （注: スクロール自体はレイアウトに影響しません。）
• 相対位置指定は サブグリッドにも通常通り適用され、 ボックスや内容全体を一緒に移動します。 （注: 相対位置指定はアライメント後に行われ、トラックサイズ計算には影響しません。）

10. 絶対位置指定

10.1. グリッドコンテナを包含ブロックとする場合

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

注: 絶対位置指定要素をグリッドコンテナに絶対配置することで そのコンテナのグリッドラインに揃えることはできますが、 その要素はグリッドのレイアウトにスペースを取ったり参加したりしません。

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* グリッドコンテナを縦に均等な4行、
     横に各10remの4列で構成 */
  justify-content: center;
  /* グリッドをグリッドコンテナ内で中央揃え */
  position: relative;
  /* abspos用包含ブロックを確立 */
}

.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番目のスパンが無視された場合に起こります。）

10.2. グリッドコンテナを親とする場合

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

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

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

11. アライメントとスペーシング

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

注: サブグリッドのグリッドアイテムも、 親グリッドのアイテムと共に ベースラインアライメントを含めてアライメントに参加します。 サブグリッド (h)参照。

marginプロパティで、 ブロックレイアウトのmargin同様にアイテムのアライメントが可能です。 グリッドアイテムは、 ボックスアライメントプロパティ（CSS Box Alignment Module [CSS-ALIGN-3]）にも従い、 行・列の両方でキーワードベースの簡単なアライメントが可能です。

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

11.1. ガター：row-gap、column-gap、gap プロパティ

row-gapやcolumn-gap （およびgapショートハンド）は、 グリッドコンテナで指定すると ガターをグリッド行・グリッド列の間に定義します。 構文はCSS Box Alignment 3 § 8 ボックス間ギャップで定義されています。

これらのプロパティの効果は、 対象となるグリッドラインが太さを持つかのようになり、 2つのグリッドライン間のグリッドトラックは それらを表すガター間のスペースとなります。 トラックサイズ計算の目的では 各ガターは指定サイズの空の固定トラックとして扱われ、 それに跨るグリッドアイテムは 対応するグリッドラインを跨いでいることになります。

注: justify-contentやalign-contentによって トラック間に追加スペースが加わることがあります。 § 12.1 グリッドサイズアルゴリズム参照。 このスペースも実質的にはガターサイズを増加させます。

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

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

折りたたみトラックのガターが折りたたまれる場合、 2つのガターが完全に重なり、端が一致します。 折りたたみトラックの片側にガターがない場合 （例えば暗黙グリッドの最初や最後のトラック）、 ガター折りたたみの結果、両「側」にガターはありません。

11.2. auto マージンでのアライメント

グリッドアイテムのautomarginは、 ブロックレイアウトのauto marginと非常によく似た効果を持ちます:

• グリッドトラックサイズ計算時は、auto marginは0として扱われます。
• インライン軸の ブロックレイアウト（CSS2§10.3.3参照）では、 いずれかの軸のauto marginはアライメント前の正の空きスペースを吸収し、 その軸での自己アライメントプロパティの効果を無効化します。
• はみ出すグリッドアイテムは auto marginをゼロに解決し、 ボックスアライメントプロパティで指定された通りにオーバーフローします。

11.3. インライン軸アライメント：justify-self、justify-itemsプロパティ

グリッドアイテムはインライン次元で、 グリッドアイテムにjustify-selfプロパティや、 グリッドコンテナにjustify-itemsプロパティでアライメントできます（[CSS-ALIGN-3]参照）。

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

注: フォールバックアライメントが使われるかどうかは レイアウト中で変化しません。 循環依存があれば常に使われます。

11.4. ブロック軸アライメント：align-self、align-itemsプロパティ

グリッドアイテムはブロック次元（インライン軸と直交する軸）でも、 グリッドアイテムにalign-selfプロパティや、 グリッドコンテナにalign-itemsプロパティでアライメントできます（[CSS-ALIGN-3]参照）。

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

11.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つのグリッドセルに自動配置される */

アライメント（gapスペースとは異なり）は グリッドトラックのサイズ決定後に行われるため、 スパンするアイテムの内容によってトラックサイズが決まる場合、 アライメント段階で余分なスペースが割り当てられ アライメントスペースを吸収します。

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

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

1. グリッドコンテナで少なくとも1つのグリッドアイテムを含む最初（最後）の行を探します。

   この行と交差するグリッドアイテムのいずれかが その行でベースラインアライメントに参加している場合、 グリッドコンテナのベースライン集合は それらのグリッドアイテムの共有アライメントベースラインから生成されます。

   そうでない場合、 グリッドコンテナの最初（最後）のベースライン集合は 行メジャーグリッド順序（グリッドコンテナの書字モードによる）で 最初（最後）のグリッドアイテムの アライメントベースラインから生成されます。 そのグリッドアイテムがグリッドのインライン軸に アライメントベースラインを持たない場合は、 まずボーダー端から合成されます。

2. グリッドコンテナに グリッドアイテムが1つも含まれない場合、 グリッドコンテナは最初（最後）のベースライン集合を持たず、 必要であればアライメントコンテキストのルールに従って 合成されます。 このアルゴリズムを終了します。

グリッド修正文書順序（グリッド順序）は、 グリッドのグリッドセルを走査する際に グリッドアイテムが遭遇される順序です。 同時に複数アイテムが見つかる場合は、 order-modified document orderで扱います。

上記ルールでベースライン計算する際、 ベースラインに寄与するボックスが スクロール可能なoverflow値の場合は、 ベースライン決定の目的ではそのボックスは初期スクロール位置にあるものとして扱います。

表セルのベースライン決定時は、 グリッドコンテナは行ボックスやtable-rowと同じようにベースラインを提供します。[CSS2]

ベースラインについてさらに詳しくは CSS Writing Modes 3 § 4.1 ベースライン入門や CSS Box Alignment 3 § 9 ベースラインアライメント詳細を参照してください。

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

この節ではグリッドレイアウトアルゴリズムを定義します。 グリッドコンテナのサイズ決定、 すべてのグリッドトラックのサイズ・位置決定、 そして配置済みの グリッド領域へのグリッドアイテムのレイアウトを行います。

1. すべてのグリッドアイテム（サブグリッドおよびそのサブアイテム含む）の配置を解決するため グリッドアイテム配置アルゴリズムを実行します。

2. § 5.2 グリッドコンテナのサイズ決定に従い グリッドコンテナのサイズを決定します。

   注: このフェーズでは トラックサイズ内の循環する<percentage>は autoとして扱います。

3. 得られたグリッドコンテナサイズに対し、 グリッドサイズ決定アルゴリズムを実行して グリッドのサイズ決定を行います。

   注: このフェーズでは トラックサイズ内の<percentage>は グリッドコンテナサイズに対して解決されます。

4. 各グリッド領域の幅・高さはこの目的には確定とみなして、 グリッドアイテムをそれぞれの包含ブロックにレイアウトします。

   注: 確定サイズのみで計算された式 （stretch fit式など）も確定となるため、 ストレッチされたグリッドアイテムのサイズも確定とみなされます。

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

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

各トラックは、指定された最小・最大 サイズ指定関数（同じ場合もある）を持ちます。 各サイズ指定関数は、次のいずれかです：

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

グリッドサイズ決定アルゴリズムは、 これらのサイズ制約を使用トラックサイズに解決する方法を定義します。

1. まずトラックサイズ決定アルゴリズムで グリッド列のサイズを決定します。

   この過程で、グリッドコンテナの インライン軸でサブグリッド化された グリッドアイテムは空として扱い、 そのグリッドアイテム（孫）はグリッドコンテナ（祖父）の 直接の子として扱われます（再帰的に内省）。

   サブグリッド化がブロック軸のみの場合や、 グリッドコンテナのインライン軸サイズが内容サイズ依存の場合も内省します。 この次元でのサイズが他方のサブグリッドトラックサイズ依存となりうるため、 そのようなアイテムがこのグリッドの列サイズ決定に寄与するサイズは、 グリッドサイズ決定アルゴリズムの同じ段階までしか決定されていないものとして扱います。 例：このステップの最初のパスではそのアイテムのトラックはこの最初のステップまでしかサイズされていません。 2回目のパスではステップ1-3の初回とステップ2回目まで終えてからサイズを返します。 この内省も再帰的に行います。

   このステップでグリッドアイテムのレイアウト計算が 利用可能スペース（ブロック軸）に依存する場合は、 トラックサイズ決定に参加する行のうち確定な最大トラックサイズ関数を持つものはそのサイズ、他は無限大と仮定します。 グリッドコンテナおよびすべてのトラックが確定サイズなら align-contentも適用し そのアイテムがまたぐギャップの最終有効サイズも考慮します。 そうでなければこの見積もりではトラックアライメント効果は無視します。

2. 次にトラックサイズ決定アルゴリズムで グリッド行のサイズを決定します。

   この過程で、グリッドコンテナの ブロック軸でサブグリッド化された グリッドアイテムは空として扱い、 そのグリッドアイテム（孫）はグリッドコンテナ（祖父）の 直接の子として扱われます（再帰的に内省）。

   列サイズ決定と同様に、 サブグリッド化がインライン軸のみの場合や、 グリッドコンテナのブロック軸サイズが内容サイズ依存の場合も内省します。 （列サイズ決定と同じく、 このグリッドの行サイズ決定に寄与するサイズも アルゴリズムのこの段階までしか決定されていないものとして扱い、再帰的に内省します。）

   ブロック軸サイズ寄与に利用可能スペースが必要なアイテムには 前ステップで算出したグリッド列サイズを使います。 グリッドコンテナのインラインサイズが確定なら justify-contentも適用し 有効な列ギャップサイズも考慮します。

3. その後、いずれかのグリッドアイテムのmin-content寄与が ステップ2で算出された行サイズ・アライメントにより変化した場合は、 新しいmin-contentおよびmax-content寄与で グリッド列サイズを再解決します（1回のみ）。

   インライン軸サイズ寄与に利用可能スペースが必要なアイテムには 前ステップで算出したグリッド行サイズを使います。 グリッドコンテナのブロックサイズが確定なら align-contentも適用し 有効な行ギャップサイズも考慮します。

   この繰り返しは、グリッドアイテムのインラインサイズが グリッド領域のブロックサイズ依存の場合に必要です。 例：折り返し列flexコンテナ（flex-flow: column wrap）、直交フロー（writing-mode）、マルチカラムコンテナ、 および行サイズ依存のaspect-ratio（または子要素にaspect ratioがある場合）など。
4. 続いて、いずれかのグリッドアイテムのmin-content寄与が ステップ3で算出された列サイズ・アライメントにより変化した場合は、 新しいmin-contentおよびmax-content寄与で グリッド行サイズを再解決します（1回のみ）。

   ブロック軸サイズ寄与に利用可能スペースが必要なアイテムには 前ステップで算出したグリッド列サイズを使います。 グリッドコンテナのインラインサイズが確定なら justify-contentも適用し 有効な列ギャップサイズも考慮します。

5. 最後に、グリッドコンテナ内で align-contentおよびjustify-contentプロパティに従ってトラックをアライメントします。

   注: この処理でトラック間に追加のスペースが生じ、 トラックサイズ計算段階で割り当てられた以上にギャップをまたぐグリッドアイテムのグリッド領域が拡大する場合があります。

注: サブグリッド化された次元でのトラックサイズ決定は、 その軸の各トラック内のアイテムを 親グリッドのメンバーとして扱います。 このインターレースのため、グリッドサイズ決定は 各軸ごとにサブグリッドに掘り下げる必要があり、 両軸を再帰的に完了させるのではありません。 つまり、サブグリッドが直交フローを作る場合、 トラックサイズ決定の順序が入れ子グリッドと逆になります。

<grid-A>
  <grid-B subgrid=columns>
    <grid-C subgrid=rows></grid-C>
    <grid-D></grid-D>
  </grid-B>
<grid-A>

12.2. トラックサイズ用語

min track sizing function

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

max track sizing function

トラックが minmax() 関数でサイズ指定された場合、 これはその関数の第2引数です。 それ以外の場合は、そのトラックのサイズ指定関数。 全ての場合において、auto および fit-content() は max-content として扱います（fit-content() の特記を除く）。

available grid space

各次元ごとに独立して available grid space は以下となります：

• grid container のサイズが確定している場合は、その内容ボックスのサイズを使います。

• grid container が min-content制約またはmax-content制約下でサイズ決定される場合は available grid spaceはその制約値（未確定）です。

注: auto サイズ指定が内容ベースサイズ（例: 水平書字モードのブロックレベルボックスの高さ）を示す場合は max-content と同等です。

すべての場合で、available grid space は grid container の min/max-width/height プロパティが確定値ならそれでクランプします。

free space

available grid space から すべてのグリッドトラック（ガター含む）の base sizes の合計を引いた値（0未満は0）。 available grid spaceが未確定なら free spaceも未確定です。

span count

該当次元でgrid itemが跨ぐgrid track数。

注: ガターは グリッドサイズ決定アルゴリズムでは min/maxサイズ関数が両方ガターの使用サイズに設定された固定サイズトラックとして扱います。 その幅もtrack sizing algorithm の計算に必ず含めます。

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

この節の残りは track sizing algorithm であり、 min と max track sizing functions から 使用トラックサイズを算出します。 各トラックは base size という <length> を持ち、アルゴリズム中で増加し最終的にそのトラックのサイズとなります。 また growth limit という <length> を持ち、 base size の最大希望値となります。 ステップは5つです：

1. トラックサイズ初期化
2. 本質サイズトラック解決
3. トラック最大化
4. 柔軟トラック拡張
5. ストレッチ auto トラック拡張

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

各トラックの base size と growth limit を初期化する。 各トラックについて、 そのトラックの min track sizing function が：

A 固定サイズ関数

絶対長さに解決し、そのサイズをトラックの初期 base size とする。

注: 未確定 長さは発生せず、 auto として扱われます。

An 本質サイズ関数

初期 base size を0にする。

各トラックについて、 そのトラックの max track sizing function が：

A 固定サイズ関数

絶対長さに解決し、そのサイズをトラックの初期 growth limit とする。

An 本質サイズ関数

A 柔軟サイズ関数

初期 growth limit を無限大にする。

いずれの場合も、growth limit が base size より小さい場合は growth limit を base size に合わせて増やします。

注: ガターは track sizing algorithmの目的上、空の固定サイズトラックとして扱います。

12.5. 本質サイズトラックの解決

このステップでは、本質サイズトラックのサイズ指定関数を絶対長さに解決します。 まず、単一トラック内に完全に収まるアイテムに基づいてサイズを決定します。 その後、複数トラックにまたがるアイテムの空間要件を徐々に加え、 可能な限り均等に余分なスペースをそれらのトラックに分配します。

注: このステップ完了時、 すべての本質的なbase sizeとgrowth limitは 絶対長さに解決されています。

注: 注意として、 fit-content()や autoのmax track sizing functionは max-contentと同様に扱われます（明示的な特記がある場合を除く）。

1. ベースライン整列アイテムの本質サイズ寄与がベースライン整列を反映するようshimする。 各ベースライン共有グループ内のアイテムについて、 各アイテムの開始/終了側（最初/最後のベースライン整列の場合）にshim（実質的には余分なmargin）を追加し、 開始/終了整列されたときに ベースラインが仕様通りに揃うようにします。

   これらのshimは、以下のトラックサイズ決定の目的でアイテムの本質サイズ寄与の一部とみなします。 アイテムが複数の本質サイズ寄与を持つ場合、shimもそれぞれ異なることがあります。

   例えば、 grid containerのサイズが 未確定の場合、 まずmin/max-content制約下でレイアウトしてサイズを決定し、 そのサイズで「実際に」レイアウトします （percentageトラック等に影響）。 各フェーズで追加されるshimは独立しており、 そのフェーズのレイアウトのみに影響します。

   注: baseline self-alignedと baseline content-aligned両方のアイテムがこのステップで考慮されます。

   注: グリッドアイテム自身のサイズが 本質サイズトラックによって決まる場合はベースライン整列に参加しないため、 shimされません。

2. 非スパンアイテムに合わせてトラックサイズを調整: 本質的なトラックサイズ関数かつ 柔軟サイズ関数でない トラックについて、spanが1のアイテムを考慮：

   min-content最小値の場合:

   トラックがmin-contentなmin track sizing functionなら、 そのbase sizeを アイテムのmin-content寄与の最大値（0未満は0）に設定。

   max-content最小値の場合:

   トラックがmax-contentなmin track sizing functionなら、 そのbase sizeを アイテムのmax-content寄与の最大値（0未満は0）に設定。

   auto最小値の場合:

   トラックがautoなmin track sizing functionかつ grid containerが min-/max-content制約下でサイズ決定される場合、 トラックのbase sizeを アイテムのlimited min-content寄与の最大値（0未満は0）に設定。 limited min-/max-content contributionは （この目的では）アイテムのmin-/max-content寄与であり、 max track sizing function（fit-content()引数など）が 固定ならそれで制限し、 最終的にはminimum contribution（下記定義）で0未満は0。

   それ以外の場合は、 トラックのbase sizeを アイテムのminimum contributionの最大値（0未満は0）に設定。 minimum contributionは アイテムが持てる最小のouter sizeです。 具体的には、アイテムのpreferred sizeがautoとして振る舞う、または該当軸で包含ブロックサイズ依存なら、 minimum contributionは outer size（min-sizeをpreferred sizeとして仮定したときの使用値）。 それ以外ならminimum contributionは min-content contribution。 minimum contributionは通常内容サイズ依存なので 本質サイズ寄与の一種とみなします。

   注: min-sizeがauto（初期値）のアイテムでは minimum contributionは 通常min-content contributionと同等ですが、 一部ケースで異なります。詳しくは§ 6.6 グリッドアイテムの自動最小サイズ参照。 また、minimum contribution ≤ min-content contribution ≤ max-content contributionです。

   min-content最大値の場合:

   トラックがmin-contentなmax track sizing functionなら、 growth limitを アイテムのmin-content contributionの最大値に設定。

   max-content最大値の場合:

   トラックがmax-contentなmax track sizing functionなら、 growth limitを アイテムのmax-content contributionの最大値に設定。 fit-content()最大値の場合は、 このgrowth limitをfit-content()引数でクランプする。

   いずれの場合も、トラックのgrowth limitが base sizeより小さくなった場合は、 growth limitをbase sizeに合わせて増やします。

   注: このステップは、スパンアイテム処理の簡略化であり、 span=1のアイテムに対して下記の手順を実行した場合と同じ挙動となります。

3. 内容サイズトラックを跨ぐスパンアイテムのサイズ調整: 次に、span=2で柔軟サイズ関数のトラックを跨がないアイテムを考慮。
   1. 本質的最小値の場合: まず、これらのアイテムのminimum contributionを収容するために 本質なmin track sizing functionを持つ トラックのbase sizeに 余分なスペースを分配。

      グリッドコンテナがmin-/max-content制約下でサイズ決定される場合は、 アイテムのlimited min-content contributionを minimum contributionの代わりに使う。 （複数トラック跨ぎアイテムの場合は、limited min-/max-content contributionの計算上限は 跨ぐトラックの固定max track sizing functionの合計、 かつそれが適用されるのは固定トラックのみ跨ぐ場合。)

   2. 内容ベース最小値の場合: 次に、これらのアイテムのmin-content contributionを収容するために min-contentや max-contentな min track sizing functionを持つ トラックのbase sizeに 余分なスペースを分配。
   3. max-content最小値の場合: 次に、グリッドコンテナがmax-content制約下でサイズ決定される場合は、 アイテムのlimited max-content contributionを収容するため、 autoや max-contentな min track sizing functionを持つ トラックのbase sizeに 余分なスペースを分配。

      すべての場合で、max-contentな min track sizing functionを持つ トラックのbase sizeにも アイテムのmax-content contributionを収容するため 余分なスペースを分配を続行。

   4. この時点でトラックのgrowth limitがbase sizeより小さくなっていれば、 growth limitをbase sizeに合わせて増やす。
   5. 本質的最大値の場合: 次に、本質な max track sizing functionを持つ トラックのgrowth limitに アイテムのmin-content contributionを収容するため 余分なスペースを分配。 このステップでgrowth limitが無限大から有限値に変化したトラックは 次のステップ用に無限成長可能としてマーク。
      なぜ無限成長可能フラグが必要?

      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。
      
      最初のアイテムでmin-content/max-contentを解決すると：
      
      track 1: base size = 10 growth limit = 10
      
      track 2: base size = 0 growth limit = infinity
      
      次に2番目のアイテムのmin-content/max-contentを解決。
      
      フェーズ1でtrack 2のbase sizeを20（2トラックのbase size合計が30になるよう）。
      フェーズ2は該当トラックなしで何もしない。
      フェーズ3でtrack 2のgrowth limitを20（2トラックのgrowth limit合計が30になるよう）。
      フェーズ4ではgrowth limit合計を70増やしitem 2を収容。
      選択肢は：
      
      1. 2トラックのgrowth limitを均等に増やして [45, 55]。
      2. 2番目のトラックだけgrowth limitを増やして [10, 90]。
      
      直前に設定したgrowth limitを制約とみなさず（無限とみなす）分配することで
      後者の結果となり、最初のトラックが最初のアイテムにちょうど合わせてサイズされる。
      

   6. max-content最大値の場合: 最後にmax-contentな max track sizing functionを持つ トラックのgrowth limitに アイテムのmax-content contributionを収容するため 余分なスペースを分配。

   spanが大きいアイテムについても同様に段階的に繰り返し、すべてのアイテムを考慮します。

4. 柔軟トラックを跨ぐスパンアイテムのサイズ調整: 次に、前ステップを繰り返すが（spanサイズごとにまとめず）、 柔軟サイズ関数のトラックをまたぐすべてのアイテムを一括で考慮し、
   • 余分なスペースは柔軟トラックだけに分配 （他のトラックはすべて固定サイズ関数とみなす）
   • そのアイテムがまたぐ柔軟トラックの 柔軟サイズ関数の合計が1以上なら その比率でスペース分配し、1未満ならその比率＋残りは均等分配
5. まだ無限大のgrowth limitを持つトラックがあれば （例: アイテムが配置されていない、または柔軟トラックの場合）、 そのgrowth limitをbase sizeに設定。

注: アイテムが複数トラックを跨ぐ場合、 本質サイズ制約を満たす唯一の方法はありません。 このアルゴリズムは現実のユースケースで良好な結果を示した複数のヒューリスティクスを組み込んでいます。 今後、より高度なヒューリスティクスが判明すればアルゴリズムの更新もありえます。

12.5.1. 跨るトラックへの余分なスペースの分配

12.6. トラック最大化

free spaceが正の場合、 すべてのトラックのbase sizeに均等に分配し、 トラックがgrowth limitに達したら凍結し、必要に応じて未凍結トラックを成長させます。

このステップの目的上： grid containerを max-content制約下でサイズ決定する場合、 free spaceは無限大。 min-content制約下では、 free spaceはゼロ。

この処理でグリッドが grid containerのinner size（max-width/heightで制限される）より大きくなる場合は、 このステップをやり直し、 available grid spaceを グリッドコンテナがmax-width/heightでサイズされた時のinner sizeとみなします。

12.7. 柔軟トラックの拡張

このステップでは、柔軟トラックのサイズを、 fr単位で割り当て可能な最大値で決定します（available spaceを超えない範囲）。

まず、グリッドの使用するflex fractionを求めます：

free spaceがゼロ、または grid containerを min-content制約下でサイズ決定する場合:

使用されるflex fractionはゼロ。

それ以外でfree spaceが 確定長さの場合:

使用されるflex fractionは 全トラックとspace to fillとして available grid spaceを用いて frのサイズを求める結果。

それ以外でfree spaceが 未確定長さの場合:

使用されるflex fractionは以下の最大値：

• 各柔軟トラックについて、flex factorが1超なら、 トラックのbase size÷flex factor； それ以外なら、そのトラックのbase size。
• 柔軟トラックを跨ぐ各grid itemについて、 アイテムが跨ぐ全トラックとspace to fillとして アイテムのmax-content contributionを使って frのサイズを求める結果。

このflex fractionで グリッドがgrid containerの min-width/height未満（またはgrid containerのmax-width/height超）になる場合は、 このステップをやり直し、 free spaceを確定値、 available grid spaceを grid containerの inner size （min-width/heightまたはmax-width/heightでサイズされた場合）で扱う。

各柔軟トラックについて、 使用するflex fraction× トラックのflex factorが トラックのbase sizeより大きい場合、 base sizeをその値に設定。

12.7.1. frのサイズ決定

このアルゴリズムは、fr単位が目標サイズを超えずに割り当てられる最大サイズを求めます。 grid trackの集合と、 割り当てるべきスペースを引数に呼び出されます。

1. 余剰スペースを space to fillから 非柔軟grid trackのbase size合計を引いたものとする。
2. flex factor合計を 柔軟トラックの flex factor合計とする。 1未満なら1にする。
3. 仮想frサイズを leftover space÷flex factor合計とする。
4. 仮想frサイズ×柔軟トラックのflex factorが トラックのbase size未満の場合は そのトラックを非柔軟としてこのアルゴリズムを再実行。
5. 仮想frサイズを返す。

12.8. autoトラックのストレッチ

content-distributionプロパティが grid containerで この軸でnormalまたはstretchの場合、 autoなmax track sizing functionトラックを 残った正の確定free spaceで均等に拡張します。 free spaceが未確定だが grid containerが 確定なmin-width/heightを持つ場合は そのサイズを使ってこのステップのfree spaceを計算します。

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

grid containerは 行・列間やアイテム内部でページ分割できます。 break-*プロパティは grid containerが参加する整形コンテキストに対して通常通り適用されます。 この節ではそれがグリッドアイテムやその内容にどう適用されるかを定義します。

以下の分割規則では、fragmentation containerを「ページ」と呼びます。 他のfragmentation contextでも同様の規則が適用されます。 （必要に応じて「ページ」を適切なfragmentation container型に置き換えてください。） 詳細はCSS Fragmentation Module [CSS3-BREAK]参照。

分割されたグリッドコンテナの正確なレイアウトはこのレベルのGrid Layoutでは定義されていません。 ただしグリッドコンテナ内の分割には以下の規則が適用されます:

• break-beforeおよびbreak-afterプロパティは grid itemに指定すると、そのグリッド行に伝播する。 最初の行のbreak-beforeや、 最後の行のbreak-afterは grid containerに伝播される。
• grid item内で強制改ページが発生した場合、その内容サイズが増加するだけで、 兄弟アイテム内で強制改ページは発生しない。
• Class Aの分割機会は 行または列（該当軸）間に発生し、 Class Cの分割機会は 最初/最後の行（列）とgrid containerの内容端の間に発生する。[CSS3-BREAK]
• 分割後にgrid containerが継続される場合、 grid itemの （fragmentation contextのブロックフロー方向での）利用可能スペースは 以前のページでgrid containerフラグメントが消費したスペース分減る。 grid containerフラグメントが消費したスペースは、 そのページでの内容ボックスサイズ。 この調整で利用可能スペースが負になれば0にする。
• 前項によるアイテムの並び替え以外は、 UAは分割なしフローと比べてgrid containerの歪みを最小化するよう努めること。

13.1. 分割アルゴリズム例

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

これは分割アルゴリズムの一例の草案であり、 [CSS-FLEXBOX-1]アルゴリズムとの整合性確認が必要です。 フィードバック歓迎、実装ガイドとしては上記規則を参照してください。

1. § 12 グリッドレイアウトアルゴリズムに従い、 fragmentation containerのインラインサイズを使い、ブロックサイズは無制限と仮定してグリッドをレイアウト。 このステップ中、すべてのgrid-rowのautoやfr値は解決されなければならない。
2. 前ステップで決定した値でgrid containerをレイアウト。
3. 分割でgrid areaのサイズが変化した場合（行跨ぎアイテムは除く）、次のいずれかの行について行サイズを必要に応じて増やす：
   • content min track sizing functionを持つ行
   • 明示的な高さがないグリッドで、グリッド行が柔軟な場合
4. グリッドの高さがautoなら、最終的な行サイズ合計がグリッドの高さとなるべき。
5. 分割時marginの折り畳みでgrid areaがgrid containerをはみ出す場合は、 そのgrid areaを収容するようgrid containerを拡張する（分割による循環レイアウト依存を避けるために必要）。

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

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

Grid Layoutは新たなプライバシー漏洩を導入しません。

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

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

16. 変更点

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

• 相対位置指定がサブグリッドにどう適用されるか明確化。 (Issue 7123)

  • 相対位置指定はサブグリッドにも通常通り適用され、 ボックスとその内容が一緒に移動します。 （注: 相対位置指定はアライメントの後に行われ、トラックサイズには影響しません。）

• スクロールバーガターもmargin/border/paddingとともに サブグリッド自身の寄与計算に含めることを明確化（子だけでなく自身にも）。 (Issue 9935)

  非空のサブグリッドの各端で サブグリッドのmargin/border/padding （およびスクロールバーガター） を考慮し… サブグリッド自身のmargin/border/padding /gutter でさらに膨らませる。

• また、CSS Grid Level 1の前回公開以降の全変更点も反映。

16.2. 2020年8月 CR以降の変更点

• CSS Grid 1前回CRで文書化されず導入された§ 6.2 グリッドアイテムのサイズ指定とaspect-ratioの相互作用に関する誤り修正。
• “intrinsic aspect ratio”の一部記述をより汎用的なpreferred aspect ratioに更新。 (Issue 4962)
• 用語の微調整や記述の統一。

2019年12月 CSS Grid Layout Level 2 ワーキングドラフト以降の変更点

それ以外は、CSS Grid level 1の全文を組み込んだのみ。

以前の変更点はWorking Draft中の変更点参照。

16.3. Level 1以降の追加点

以下の機能はLevel 1以降に追加されました:

• サブグリッド (subgrid)

17. 謝辞

MozillaのMats Palmgren氏に深く感謝します。 彼の支援とフィードバックなくしてサブグリッド機能は前進できませんでした。 また、Daniel Tonon氏にも感謝します。 サブグリッドのギャップの賢い処理を求め、図の作成にも貢献しました。 さらにRachel Andrew氏やJen Simmons氏は CSSワーキンググループとWebデザイン／オーサリングコミュニティ間のフィードバックギャップを埋める助けとなりました。

最後に、 CSS Grid Level 2の謝辞セクションは、 CSS Grid Level 1という大事業を 可能にしたすべての方々への感謝抜きには語れません。