CSS 格子レイアウト — CSS Grid Layout Module Level 2

1.1. 背景0と動機

~web~siteが単純な文書から複階的で対話的な~appへ発展するに伴い、 例えば`浮動体$などの文書~layout用の技法は， ~appの~layoutにとり十分なものとは言えなくなってきている。 ~web~app作者たちは、［ ~table, JavaScript, 浮動された要素に対する注意深い測定 ］の組合nを利用しながら， 欲される~layoutを達成するための対処法を模索してきた。 可用な空間の変化に順応する~layoutは，不安定なことが多く、 空間の拘束が厳しくなるに伴い，直感に反する挙動に悩まされる。 代替として，多くの作者は固定的な~layoutを~~選んでいるが、 画面~上の可用な描画~空間の可変性から得られる利点は享受できなくなる。 ◎ As websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout. By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counter-intuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.

格子~layoutには、 これらの問題を解消する能力がある。 それは、［ 一連の予測-可能な~sizingの挙動を利用して， 可用な空間を何本かの~colや~rowに分割0して~layoutする ］ための仕組みを作者に供する。 作者は、 ~appの構築部品を成す要素~群の精確な位置と~sizeを，［ これらの~colや~rowの交差域で定義される`区画$ ］の中で与えられるようになる。 格子~layoutの順応的~能力, それにより［ 内容と~styleを もっときれいに分離する方法 ］を，以下の例で~~説明する。 ◎ The capabilities of grid layout address these problems. It provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application into the grid areas defined by the intersections of these columns and rows. The following examples illustrate the adaptive capabilities of grid layout, and how it allows a cleaner separation of content and style.

/** 
`格子~容器$上に格子を宣言して、
各 `格子~駒$用の空間を定義する。
◎
Define the space for each grid item by declaring the grid on the grid container.
 */

#grid {

  /* 
格子~layoutで内容を~lay-outする。
 */
  display: grid;

  /* 2 本の~col：
   • 1 本目の~colは内容に合わせて~sizeされる。
   • 2 本目の~colは残りの空間を受取る（が、この~colを占める盤面やゲーム~controlに要する最小~横幅よりは，決して小さくされない）。
◎
   * 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])
  */

  grid-template-columns:
    /* col 1 */ auto
    /* col 2 */ 1fr;

  /* 3 本の~row：
   • 1 本目, 3 本目の~rowは内容に合わせて~sizeされる。
   • 2 本目の~rowは残りの空間を受取る（が、盤面／成績~区画に要する最小~縦幅よりは，決して小さくされない）。
◎
   * 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.
  */

  grid-template-rows:
    /* row 1 */ auto
    /* row 2 */ 1fr
    /* row 3 */ auto;
}

  /* 
各 駒の位置を［
各自の `grid-row$p, `grid-column$p ~propによる座標
］を利用して指定する。
◎
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>

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

    /* 
格子の各［
~row, ~col, 区画
］は、
`grid-template-areas$p ~propを利用して視覚的に定義される。
各~文字列が 1 本の~rowを表し, その中の各~単語が~rowの中のある区画を表す。
~col数は文字列~内の語数から決定される
— どの文字列~内の語数も一致するように揃えなければならないことに注意。
◎
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";

    /* 
各［
~col／~row
］を~sizeする仕方は［
`grid-template-columns$p ／ `grid-template-rows$p
］~propであてがえる。
◎
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$d: landscape) /* 横置き方位 */ {
  #grid {
    display: grid;
    /* 
~template~propは，ここでも同じ一連の名前からなる区画を定義するが、
ここでは，横置き方位により適するように位置を替える：
◎
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;
  }
}

/* 
`grid-area$p ~propにより、
格子~駒は，格子の有名~区画に配置されるようになる：
◎
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>

1.2. 値~定義

【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

【この訳に特有な表記規約】

この節の以下では、 本文を解釈するために必要な情報を与える。

縦横いずれかの軸に属する`筋$ — ~rowまたは~col — について述べている文脈の下での， (1) ［ `筋^i, `辺^i, `罫^i ］などの，どちらの軸にも属し得る語、 あるいは (2) ［ `始端^i, `終端^i, `~size^i, `~span^i, `位置^i, `距離^i, `空間^i ］などの，どちらの軸にも相対的になり得る語は、 他が指定されない限り，その文脈の下で 一貫して，当の軸に［ (1) 属する方, あるいは (2) 相対的な方 ］を表す とする。 (2) の “相対的” とは、 格子の中のどの筋かにより変わり得る方 — すなわち、 格子の中で筋が並べられていく方向（筋に垂直な軸）に基づくこと意味する。

加えて、［ ~row, ~col ］どちらの筋にも該当し得る記述は、 他が指定されない限り，`並立的な^em 記述であり, その上で前~段落の規約も適用するとする。

例えば， “格子を成す各 `筋$の始端に在る`罫$の位置は…” の様な記述は、 次のような（冗長な） 2 つの記述が並行している（ 2 つを個別に解釈する）ことを表す：

• “［ 格子を成す各~colの［ ~col軸に垂直な軸における［ ~colの始端 ］に在る，~col軸に平行な罫 ］の，~col軸に垂直な軸における位置は…”
• “［ 格子を成す各~rowの［ ~row軸に垂直な軸における［ ~rowの始端 ］に在る，~row軸に平行な罫 ］の，~row軸に垂直な軸における位置は…”

（ 元々の原文が，多くの箇所でそのような~~形で記述されているが、 訳において特に，そのような~~形の記述に~~変形している箇所もある。 ）

2.1. 格子の宣言-法

`格子$の各`筋$（ ~row, ~col の総称）は、 `明示的な格子$用の各種~propを通して明示的に宣言して~sizeでき、 また，`明示的な格子$の外側に配置される駒に対しては暗黙的に作成され得る。 `grid$p 略式~propとその各種~下位propは、 格子の~parameter群を定義する。 （ `§ 格子の定義-法＠#grid-definition$ ） ◎ The tracks (rows and columns) of the grid are declared and sized either explicitly through the explicit grid properties or are implicitly created when items are placed outside the explicit grid. The grid shorthand and its sub-properties define the parameters of the grid. § 7 Defining the Grid

【 `上述したように＠#_conventions$，筋の “~size” は、 長さではなく太さを指す。 】【 以下の各~節における例は、 横組みを念頭に記されている — そのままでは縦組みには通用しない記述もあることに注意。 】

main {
  `grid$p: "H    H "
        "A    B "
        "F    F " 30px
  /     auto 1fr;
}

main {
  grid: repeat(auto-fill, 5em) / auto-flow 1fr;
  height: 100vh;
}
@media print {
  main {
    grid: auto-flow 1fr / repeat(auto-fill, 5em);
  }
}

main {
  grid: auto 1fr auto / repeat(5, 1fr);
  min-height: 100vh;
}

2.2. 駒の配置-法

`格子~容器$の内容は、 （`~flex駒$と相似的に）個々の`格子~駒$たちに編成されてから， `格子$内の予め定義された各~区画にアテガわれる。 それらは、 `格子~配置~prop$により座標を利用して明示的に配置することも， `自動-配置$を利用して空な区画に暗黙的に配置することもできる。 （`§ 格子~駒の配置-法＠#placement$） ◎ The contents of the grid container are organized into individual grid items (analogous to flex items), which are then assigned to predefined areas in the grid. They can be explicitly placed using coordinates through the grid-placement properties or implicitly placed into empty areas using auto-placement. § 8 Placing Grid Items

grid-area: a;          /*
        
`有名~区画$ "a" の中へ配置する
◎
Place into named grid area “a
 */
grid-area: auto;       /*
        
次にある空な区画の中へ自動-配置する
◎
Auto-place into next empty area
 */
grid-area: 2 / 4;      /*
        
~row 2, ~col 4 の中へ配置する
◎
Place into row 2, column 4
 */
grid-area: 1 / 3 / -1; /*
        
すべての~rowに~spanする~col 3 の中へ配置する
◎
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. 格子の~sizing

`格子~駒$が`配置された＠#placement$なら： ◎ ↓

1. 各 `筋$（ ~row／~col ）の~sizeが、 それら駒の内容や可用な空間の~sizeを織り込みながら， 格子~定義に指定されるように計算される。 ◎ Once the grid items have been placed, the sizes of the grid tracks (rows and columns) are calculated, accounting for the sizes of their contents and/or available space as specified in the grid definition.

2. 次に，~sizeされた格子は、 `格子~容器$の`内容-分布~prop$に則って，その`格子~容器$の中で整列される。 （`§ 整列とアキ＠#alignment$） ◎ The resulting sized grid is aligned within the grid container according to the grid container’s align-content and justify-content properties. § 11 Alignment and Spacing

   次の例では、 横方向に余った空間をすべての~colに分配するように，両端の~colを端に寄せた上で、 `格子~容器$内の格子の縦幅が `100vh^v 未満のときは，それを縦方向に中央寄せにする。 ◎ The following example justifies all columns by distributing any extra space among them, and centers the grid in the grid container when it is smaller than 100vh.

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

3. 最後に，各 `格子~駒$は、 自身にアテガわれた`区画$の中で自前の［ ~sizing~prop `CSS2$r と整列~prop `CSS-ALIGN-3$r ］に指定されるとおり~sizeされ，整列される。 ◎ Finally each grid item is sized and aligned within its assigned grid area, as specified by its own sizing [CSS2] and alignment properties [CSS-ALIGN-3].

3.1. 罫（格子~線）

`格子~線@ （ `grid line^en ） — 略して 罫（ `line^en ） — とは、 `格子$を［ 横方向／縦方向 ］に分割0する線である 【描画されない，概念的な線である】 【この訳では、もっぱら， “罫” の表記に統一する】 。 `罫$は、 各［ ~row／~col ］を挟むように存在する。 それらは［ 数量的~index【 1 から数える】, あるいは指定された名前 ］で参照rできる。 `格子~駒$の`格子$内における位置は、 `格子~配置~prop＠#placement$を介して参照される`罫$から決定される。 ◎ Grid lines are the horizontal and vertical dividing lines of the grid. A grid line exists on either side of a column or row. They can be referred to by numerical index, or by an author-specified name. A grid item references the grid lines to determine its position within the grid using the grid-placement properties.

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

/* 
先の例と等価な~layout。
ここでは、
明示的に命名された罫【！有名~罫】を利用する。
◎
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. 格子の筋と升

`格子~筋@ — 略して 筋（ `track^en ） — とは、［ `格子~col$, `格子~row$ ］の総称である 【この訳では、もっぱら， “筋” と略記する】 。 言い換えれば、 それは，隣接する 2 本の平行な`罫$の合間を成す空間である。 各`筋$には，~sizing関数がアテガわれる。 それは、 筋rcがどれだけ太く拡幅し得るか — すなわち，その限界bを成す`罫$の間隔をどれだけ離せるか — を制御する。 互いに隣接する`筋$は、 `側溝$で分離できる — さもなければ すき間なく収納される。 ◎ Grid track is a generic term for a grid column or grid row—in other words, it is the space between two adjacent grid lines. Each grid track is assigned a sizing function, which controls how wide or tall the column or row may grow, and thus how far apart its bounding grid lines are. Adjacent grid tracks can be separated by gutters but are otherwise packed tightly.

【 筋 — 原語の `track^en は，陸上トラック競技の “トラック” と同じ~~概念。 】【 ~row, ~colどちらが横方向になるかは、 § `格子~layout$にて説明されたように，`書字~mode$に依存する （`参照＠#note-writing-mode$）。 ほとんどの例は， 横組み（ ~rowが横方向）を前提に記されているが、 縦組みの場合には逆になる。 】

`格子~升@ — 略して 升（ `cell^en ） — とは、 格子を成す［ ある~row, ある~col ］の交差域である 【この訳では、もっぱら， “升” と略記する】 。 それは、 ~rowと~colのそれぞれについて隣接する 2 本の`罫$に囲まれた空間であり、 `格子~駒$を位置させるときに参照できる，格子の最~小な単位である。 ◎ A grid cell is the intersection of a grid row and a grid column. It is the smallest unit of the grid that can be referenced when positioning grid items.

#grid {
  display: grid;
  grid-template-columns: 150px 1fr; /* 2 本の~col*/
  grid-template-rows: 50px 1fr 50px /* 3 本の~row*/
}

3.3. 格子~区画

`格子~区画@ — 略して 区画（ `area^en ） — とは、 `格子~駒$の~lay-outに利用される，論理的な空間である 【この訳では、もっぱら， “区画” と略記する】 。 `区画$は、 互いに隣接する 1 個~以上の`升$からなる。 区画は、 その限界bの各~側に対応する 4 本の`罫$で囲まれる。 区画は、 それに交差する`筋$の~sizingに関与する。 区画は、［ `格子~容器$の `grid-template-areas$p ~propを利用して付与される名前 ］を介して明示的に，あるいは［ その限界bを成す`罫$ ］を介して暗黙的に，参照される。 各`格子~駒$は、 `格子~配置~prop＠#placement$を利用して`区画$にアテガわれる。 ◎ A grid area is the logical space used to lay out one or more grid items. A grid area consists of one or more adjacent grid cells. It is bound by four grid lines, one on each side of the grid area, and participates in the sizing of the grid tracks it intersects. A grid area can be named explicitly using the grid-template-areas property of the grid container, or referenced implicitly by its bounding grid lines. A grid item is assigned to a grid area using the grid-placement properties.

/* 
~template構文の用例
◎
using the template syntax
*/
#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 }

/* 
`#item2^c と `#item3^c を区画 `b^l 内の異なる地点に整列させる。
既定では［
各~格子~駒は，自身が置かれる区画に収まるよう伸張される
］ので、
これらの駒は互いに重なることになる。
◎
Align items 2 and 3 at different points in the grid area "b".
By default, grid items are stretched to fit their grid area
and these items would layer one over the other.
*/
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

`区画$は、 その中へ~lay-outされる`格子~駒$の`包含塊$を形成する。 同じ`区画$に配置された複数の`格子~駒$は、 互いの~layoutに直に影響することはない。 しかしながら，間接的には、 `格子~駒$が`内在的~sizing関数$を伴う場合，その駒が占めている筋の~sizeに （したがってそれを囲んでいる`罫$の位置にも） 影響し得る結果、 別の`格子~駒$の位置や~sizeにも影響することになる。 ◎ A grid item’s grid area forms the containing block into which it is laid out. Grid items placed into the same grid area do not directly affect each other’s layout. Indirectly, however, a grid item occupying a grid track with an intrinsic sizing function can affect the size of that track (and thus the positions of its bounding grid lines), which in turn can affect the position or size of another grid item.

3.4. 入子な格子~駒, 下位格子~化された格子~駒

`格子~駒$は、 その `display$p に `grid^v を与えることにより，`格子~容器$になれる — そのような駒は、 `入子な格子@ と称される。 `入子な格子$の内容の~layoutは、 ~~既定では，その `親~格子@ — 自身が関与している`格子~容器$ — の~layoutとは独立になる。 ◎ A grid item can itself be a grid container by giving it display: grid. In the general case the layout of this nested grid’s contents will be independent of the layout of the parent grid it participates in.

しかしながら，複数の`格子~駒$ 【すなわち，`入子な格子$内の各~駒, `親~格子$内の各~駒】 の内容を互いに整列することが必要yな事例もある。 `入子な格子$ %格子 は `下位格子@ にすることもできる。 この事例では， %格子 の`下位格子~化$された各~軸 %軸 において、 %格子 を成す各~筋の定義は親の`格子~容器$へ先送りされ， %格子 を成す各`格子~駒$は %軸 において`親~格子$の~sizingに関与するようになり、 %格子 の内容を %軸 において`親~格子$の内容に 【したがって，`親~格子$を成す他の`下位格子$の内容とも】 整列できるようになる。 `§ 下位格子＠#subgrids$を見よ。 ◎ However, in some cases it might be necessary for the contents of multiple grid items to align to each other. A nested grid can defer the definition of its rows and/or columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the parent grid, allowing the contents of both grids to align. See § 9 Subgrids.

`下位格子$は、［ `grid-template-rows$p ／ `grid-template-columns$p ］の `subgrid$vt ~keywordにより確立され，各 軸ごとに`下位格子~化$できる。 `下位格子~化$された軸は無い格子は `自立的な格子@ を成す。 ◎ A subgrid is established by the subgrid keyword of grid-template-rows or grid-template-columns, and can be subgridded in either axis or in both. A grid that has no subgridded axis is a standalone grid.

【 言い換えれば，`下位格子$は、［ `入子な格子$のうち，［ ~row, ~col ］軸どちらかは`下位格子~化$されたもの ］を指す総称として定義される。 】

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

5.1. 格子~容器の確立-法： `display^p の `grid^v, `inline-grid^v 値

`grid@v

この値は、 要素に`格子~容器$~boxを生成させる — `~flow~layout$内に配置されたときには、 `塊~level$になるような。 ◎ This value causes an element to generate a grid container box that is block-level when placed in flow layout.

`inline-grid@v

この値は、 要素に`格子~容器$~boxを生成させる — `~flow~layout$内に配置されたときには、 `行内~level$になるような。 ◎ This value causes an element to generate a grid container box that is inline-level when placed in flow layout.

`格子~容器@ のうち，`下位格子$でないものは、 `格子~整形~文脈@ を，その内容~用の`独立な整形~文脈$として確立する。 これは、［ その内容の~layoutに，塊~layoutではなく `格子~layout$を利用する ］ことを除き， 独立な`塊~整形~文脈$を確立したとするときと同じにふるまう【！するのと同じになる】： ◎ A grid container that is not a subgrid establishes an independent grid formatting context for its contents. This is the same as establishing an independent block formatting context, except that grid layout is used instead of block layout:＼

• `浮動体$は格子~容器の中へは侵入しない。 ◎ floats do not intrude into the grid container,＼
• 格子~容器の~marginと その内容の~marginは、 `相殺-$されない。 ◎ and the grid container’s margins do not collapse with the margins of its contents.＼
• `格子~容器$の内容は、 各 `駒$の`包含塊$の境界線を形成している`罫$により， `格子$の中へ~lay-outされる。 ◎ The contents of a grid container are laid out into a grid, with grid lines forming the boundaries of each grid items’ containing block.

`下位格子$の内容は、 入子にされただけの格子と違って， 親の`格子~整形~文脈$に関与する — したがって、 `下位格子$は`独立な整形~文脈$は確立しない。 ◎ Unlike those of a regular nested grid, a subgrid’s contents participate in its parent grid formatting context; thus a subgrid does not establish an independent formatting context.

`格子~容器$は`塊~容器$ではないので、 塊~layoutを前提に設計されている~propには， 格子~layoutの文脈~下では適用されないものもある。 特に： ◎ Grid containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of grid layout. In particular:

• ［ `float$p ／ `clear$p ］には、 `格子~駒$に対する効果は無い。 それでも、 `float$p ~propは，`格子~容器$の子の `display$p の算出d値には影響する — それが算出されるのは、 `格子~駒$が決定される`より前^emなので。 ◎ float and clear have no effect on a grid item. However, the float property still affects the computed value of display on children of a grid container, as this occurs before grid items are determined.
• `vertical-align$p には、 格子~駒に対する効果は無い。 ◎ vertical-align has no effect on a grid item.
• ［ `first-line$pe ／ `first-letter$pe ］疑似要素は、 `格子~容器$には適用されない — `格子~容器$は、 その先祖に［ `整形される最初の行l$／`先頭字$ ］を供与しない。 ◎ the ::first-line and ::first-letter pseudo-elements do not apply to grid containers, and grid containers do not contribute a first formatted line or first letter to their ancestors.

［ 浮動された／`絶対的に位置され$た ］要素の `display$p は、 その指定d値が `inline-grid$v の場合，その算出d値は `grid$v になる 【すなわち，`塊~化$される】 。 したがって， `CSS2$r `§ 9.7＠~CSS2J#dis-pos-flo$ の表は、 次の行を追加するよう改正される ⇒＃ “指定d値” 列の欄は `inline-grid$v, “算出d値” 列の欄は `grid$v ◎ If an element’s specified display is inline-grid and the element is floated or absolutely positioned, the computed value of display is grid. The table in CSS 2.1 Chapter 9.7 is thus amended to contain an additional row, with inline-grid in the "Specified Value" column and grid in the "Computed Value" column.

5.2. 格子~容器の~sizing

この節の用語【最小-／最大-〜】の定義については， `CSS-SIZING-3$r を見よ。 ◎ Note see [CSS-SIZING-3] for a definition of the terms in this section.

`格子~容器$は、 それが関与する整形~文脈の規則を利用して~sizeされる： ◎ A grid container is sized using the rules of the formatting context in which it participates:

• `塊~整形~文脈$における`塊~level$の~boxとしては、 `塊~box$が整形~文脈を確立するときと同様に~sizeされる — その際の `~autoS$v 【！auto】【！auto 値のリンク先は更新される回ごとに変化 — 以下同様】 による`行内~size$は、 `置換され$ない塊~boxに対するときと同様に計算される。 ◎ As a block-level box in a block formatting context, it is sized like a block box that establishes a formatting context, with an auto inline size calculated as for non-replaced block boxes.
• `行内~整形~文脈$における`行内~level$の~boxとしては、 `不可分な行内~level$の~box（行内-塊など）と同様に~sizeされる。 ◎ As an inline-level box in an inline formatting context, it is sized as an atomic inline-level box (such as an inline-block).

行内／塊いずれの整形~文脈においても、 `格子~容器$に対する `~autoS$v【！＊】 による`塊~size$は， その`最大-内容~size$になる。 ◎ In both inline and block formatting contexts, the grid container’s auto block size is its max-content size.

注記： 塊~layout仕様【！＊】が，おそらく これを定義するべきだが、 まだ書かれていない。 ◎ The block layout spec should probably define this, but it isn’t written yet.

格子が［ `最大-内容~拘束$／ `最小-内容~拘束$ ］の下で~sizeされるときの，`格子~容器$の［ `最大-内容~size$ ／ `最小-内容~size$ ］は、 `格子~容器$の適切な軸の方の一連の筋~size（`側溝$も含む）の総和になる。 ◎ The max-content size (min-content size) of a grid container is the sum of the grid container’s track sizes (including gutters) in the appropriate axis, when the grid is sized under a max-content constraint (min-content constraint).

5.3. ~scroll可能な格子~overflow

`overflow$p ~propは、 `格子~容器$にも適用される。 ◎ The overflow property applies to grid containers.

`格子$は — 内在的~sizingに含まれるのと同じく （ `§ 格子~容器の~sizing＠#intrinsic-sizes$を見よ） — `格子~容器$の`~scroll可能な~overflow区画$にも含まれる。 ◎ Just as it is included in intrinsic sizing (see § 5.2 Sizing Grid Containers), the grid is also included in a grid container’s scrollable overflow region.

注記： `格子~容器$が`~scroll容器$であるときは、 ~paddingとの相互作用にも~~留意すること： 追加的な~paddingは、 ~scroll可能な内容の `place-content$p 整列を可能化する必要に応じて， `~scroll可能な~overflow矩形$に追加されるものと定義される。 `CSS-OVERFLOW-3$r `§ ~scroll可能な~overflow＠~CSSOVERFLOW3#scrollable$を見よ。 ◎ Note: Beware the interaction with padding when the grid container is a scroll container: additional padding is defined to be added to the scrollable overflow rectangle as needed to enable place-content: end alignment of scrollable content. See CSS Overflow 3 § 2.2 Scrollable Overflow

5.4. 巨大な格子の制限-法

~memoryには限りがあるので、 ~UAは、 `暗黙的な格子$にアリな~size【~span数】を自身が定義する上限 （範囲 { −10000 〜 10000 } に入る筋は収容するベキである） に切詰めて， その上限を超える罫をすべて落としてもヨイ。 `格子~駒$が，この上限を超えて配置される場合、 その区画を，その上限付き格子の中に切詰めるモノトスル — 次に述べるように。 ◎ Since memory is limited, UAs may clamp the possible size of the implicit grid to be within a UA-defined limit (which should accommodate lines in the range [-10000, 10000]), dropping all lines outside that limit. If a grid item is placed outside this limit, its grid area must be clamped to within this limited grid.

`格子~区画を切詰める@ ときは： ◎ To clamp a grid area:

• 当の`区画$が上限付き`格子$の内側にも外側にも~spanする場合 ⇒ 駒の`~span数$を［ 上限付き格子の最後の罫 ］までに切詰める。 ◎ If the grid area would span outside the limited grid, its span is clamped to the last line of the limited grid.
• 当の`区画$が上限付き格子の完全に外側に配置される場合 ⇒ 駒の`~span数$を 1 にした上で，区画を［ 格子の その側の最後の`筋$ ］に位置し直す。 ◎ If the grid area would be placed completely outside the limited grid, its span must be truncated to 1 and the area repositioned into the last grid track on that side of the grid.

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

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

6.1. 格子~駒の `display^p

`格子~駒$は、 `下位格子$でない限り，その内容~用に`独立な整形~文脈を確立する$。 しかしながら，格子~駒は `格子~level@ の~boxであって, `塊~level$の~boxではないので、 駒が関与するのは，その容器の`格子~整形~文脈$になる — `塊~整形~文脈$ではなく。 ◎ Unless it is a subgrid, a grid item establishes an independent formatting context for its contents. However, grid items are grid-level boxes, not block-level boxes: they participate in their container’s grid formatting context, not in a block formatting context.

所与の要素に対し，［ その先祖であって `display$p の`算出d値$が `contents^v 以外になるもののうち，要素に最も近いもの ］の `display$p の`算出d値$が［ `grid$v ／ `inline-grid$v ］である場合、 要素の自前の `display$p 値は，`塊~化$される。 （この種の `display$p 値の変換の詳細は、 `CSS2$r `§ 9.7＠~CSS2J#dis-pos-flo$, `CSS-DISPLAY-3$r `§ ~box型の自動的な変形n＠~CSSDISP#transformations$ を見よ。） ◎ If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is grid or inline-grid, the element’s own display value is blockified. (See CSS2.1 § 9.7 [CSS2] and CSS Display 3 § 2.7 Automatic Box Type Transformations for details on this type of display value conversion.)

注記： この塊~化は、 当の［ `grid^v ／ `inline-grid^v ］にされた先祖が`格子~容器$を生成しない場合でも，依然として生じる — 例： それが［ `置換され$る ／ `display$p が `none^v にされた下位tree内にある ］場合でも。 ◎ Note: Blockification still occurs even when the grid or inline-grid element does not end up generating a grid container box, e.g. when it is replaced or in a display: none subtree.

注記： `display$p の値には、 通常は，元の~boxの周りに`匿名~box$の作成を誘発するものもある。 そのような~boxが格子~駒である場合、 それは先ず`塊~化$されるので，匿名~boxは作成されなくなる。 例えば， 2 個の連続する駒が `display^p: `table-cell$v を伴っていた場合、 1 個の匿名な~table中へ包装される代わりに， 2 個の別々な `display^p: `block$v にされた駒になる。 ◎ Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a grid item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous grid items with display: table-cell will become two separate display: block grid items, instead of being wrapped into a single anonymous table.

6.2. 格子~駒の~sizing

`格子~駒$は、 その`区画$により定義される`包含塊$の中で~sizeされる。 ◎ A grid item is sized within the containing block defined by its grid area.

`格子~駒$ %駒 の所与の次元における`自動的~size$の計算は、 `自己-整列~値＠~CSSALIGN#self-alignment$に応じて変わる： ◎ Grid item calculations for automatic sizes in a given dimensions vary by their self-alignment values:

`normal$v

%駒 が次を満たす場合、 `align-self$p: `stretch$v のときと同じに~sizeされる ⇒ `選好d縦横比$は無い, かつ （ %駒 は`置換され$る要素である場合は）関連な軸において`生来な~size$は無い ◎ If the grid item has no preferred aspect ratio, and no natural size in the relevant axis (if it is a replaced element), the grid item is sized as for align-self: stretch.

他の場合，対応する軸における`塊~level$の要素~用の~size計算~規則と整合するように~sizeされる （ `CSS2$r `§ 視覚-整形~modelの詳細＠~CSS2J#visudet$を見よ）。 ◎ Otherwise, the grid item is sized consistent with the size calculation rules for block-level elements for the corresponding axis. (See CSS 2.1 § 10 Visual formatting model details.)

`stretch$v

`置換され$ない要素~用の`行内~size$の計算~規則を利用する （ `CSS2$r `§ 通常~flow内にある塊~levelの置換されない要素＠~CSS2J#blockwidth$にて定義される） — すなわち，`伸張して収まる~size$。 ◎ Use the inline size calculation rules for non-replaced boxes (defined in CSS 2.1 § 10.3.3 Block-level, non-replaced elements in normal flow), i.e. the stretch-fit size.

注記： これは、 `選好d縦横比$を有する %駒 の縦横比を歪めることもある — その~sizeも他方の軸により拘束される場合には。 ◎ Note: This can distort the aspect ratio of an item with a preferred aspect ratio, if its size is also constrained in the other axis.

他のすべての値 ◎ all other values

`fit-content$v のときと同じに~sizeする。 ◎ Size the item as fit-content.

注記： `格子~駒$の［ `min-width$p ／ `min-height$p ］に対する値 `~autoS$v は、 `~flex駒$の`主-軸$~sizeに影響するときと類似に，関連な軸における筋~sizingに影響する。 `§ 格子~駒の自動的な最小~size$を見よ。 ◎ Note: The auto value of min-width and min-height affects track sizing in the relevant axis similar to how it affects the main size of a flex item. See § 6.6 Automatic Minimum Size of Grid Items.

6.3. 格子~駒の並替ng： `order^p ~prop

`order$p ~propは，`格子~駒$にも適用され、 それらの`自動-配置$や`塗ng順序$に影響する。 ◎ The order property also applies to grid items. It affects their auto-placement and painting order.

~flex駒の並替ngと同様に、 `order$p ~propは，［ 視覚的な順序を 発話や~naviの順序と `違える^em 必要がある場合 ］に限って利用されなければナラナイ。 必要なければ、 下層の文書~sourceが並替えられるべきである。 `CSS-DISPLAY-3$r【！`CSS-FLEXBOX-1$r 】 `§ 並替ngと~accessibility＠~CSSDISP#order-accessibility$ を見よ。 ◎ As with reordering flex items, the order property must only be used when the visual order needs to be out-of-sync with the speech and navigation order; otherwise the underlying document source should be reordered instead. See CSS Flexbox 1 § 5.4.1 Reordering and Accessibility in [CSS-FLEXBOX-1].

6.4. 格子~駒の~marginと~padding

隣接する 2 個の`格子~駒$は、 それぞれ独立に各自の`区画$が形成する`包含塊$の中に包含されるので， それらの~marginが`相殺-$されることはない。 ◎ As adjacent grid items are independently contained within the containing block formed by their grid areas, the margins of adjacent grid items do not collapse.

`格子~駒$ %駒 上の百分率による［ ~margin／~padding ］は、 %駒 の`包含塊$の`行内~size$を~~基準に解決される — `塊~box$のときと同様に。 例えば，横書き`書字~mode$の下では、［ 左端, 右端, 上端, 下端 ］のいずれも，百分率は包含塊の横幅を~~基準に解決される。 ◎ Percentage margins and paddings on grid items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

格子~駒に対する自動~marginは、 対応する次元の余った空間を吸収するように拡幅される。 これを利用すれば、 駒たちを互いを整列させられる。 § `auto^v ~marginによる整列-法を見よ。 ◎ Auto margins expand to absorb extra space in the corresponding dimension, and can therefore be used for alignment. See § 11.2 Aligning with auto margins

6.5. Z 軸~~方向の順序付け： `z-index^p ~prop

2 つの`格子~駒$は、 重合することもある — 互いに交差する（すなわち，ある`升$を共有する）`区画$に位置されるとき， あるいは交差しない区画に位置されるときでも, 負な~marginや負な位置決めにより。 `格子~駒$の塗ng順序は、［ そのままの文書~順序の代わりに `order$p により`改変された文書~順序$が利用される ］ことを除いて，行内~塊 `CSS2$r のそれと正確に同じになり、 `auto^v 以外の `z-index$p 値は， `position$p が `static^v であっても積層~文脈を作成する （ `position$p が `relative^v であったときと正確に同じに挙動する）。 したがって、 格子~駒の z-軸 順序は `z-index$p ~propで容易に制御できる ◎ Grid items can overlap when they are positioned into intersecting grid areas, or even when positioned in non-intersecting areas because of negative margins or positioning. The painting order of grid items is exactly the same as inline blocks [CSS2], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative). Thus the z-index property can easily be used to control the z-axis order of grid items.

注記： 格子~駒の外側に位置される子孫も，依然として 格子~駒により確立される積層~文脈に関与する。 ◎ Note: Descendants that are positioned outside a grid item still participate in any stacking context established by the grid item.

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

<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. 格子~駒の自動的な最小~size

注記： この節（および以降の節）では、 `CSS-SIZING-3$r にて定義される~sizingの各種用語が多用される。 ◎ Note: Much of the sizing terminology used in this section (and throughout the rest of the specification) is defined in CSS Intrinsic and Extrinsic Sizing [CSS-SIZING-3].

`格子~駒$ %駒 用に，より適度な既定の`最小~size$を供するため、 所与の軸における %駒 の`自動的な最小~size$の使用~値は，［ ~AND↓ が満たされるならば %駒 の`内容に基づく最小~size$ ／ ~ELSE_ 通例通り 0 ］になるとする： ◎ To provide a more reasonable default minimum size for grid items, the used value of its automatic minimum size in a given axis is the content-based minimum size if all of the following are true:

• %駒 は`~scroll容器$でない ◎ it is not a scroll container
• %駒 が その軸~沿いに~spanする ある`筋$の`~min筋~sizing関数$は `auto$vt である ◎ it spans at least one track in that axis whose min track sizing function is auto
• %駒 がその軸~沿いに~spanする`筋$は 1 本だけか，どれも`~flex可能$でない ◎ if it spans more than one track in that axis, none of those tracks are flexible ◎ ↑Otherwise, the automatic minimum size is zero, as usual.

注記： `内容に基づく最小~size$は、 `内在的~size供与$の一種なので， `CSS-SIZING-3$r `§ 内在的~供与＠~SIZING#intrinsic-contribution$ における~~条項が適用される。 ◎ Note: The content-based minimum size is a type of intrinsic size contribution, and thus the provisions in CSS Sizing 3 § 5.2 Intrinsic Contributions apply.

`内容に基づく最小~size$は： ◎ ↓

• ~boxの`内在的~size$ （例： 要素の`最小-内容~size$） を計算する目的においては、 当の軸における~boxの~sizeを不定にする （例えば、 ~boxの `width$p ~propが`確定的$な~sizeを指定していても）。 したがって、 この~sizeを~~基準に計算される百分率は， `~autoとして挙動する$ようになることに注意。 ◎ For the purpose of calculating an intrinsic size of the box (e.g. the box’s min-content size), a content-based minimum size causes the box’s size in that axis to become indefinite (even if e.g. its width property specifies a definite size). Note this means that percentages calculated against this size will behave as auto.
• 内在的~sizeを計算する`以外^emの目的においては、 ~boxの~sizeが不定になるよう強制しない （明示的な `min-content$v【！`min-content$vt】, 等々や`最小~size$と違って）。 しかしながら、 ある百分率が，この最小が適用される`より前^emに~boxの~sizeを~~基準に解決される場合、 それを適用した後の新たな~sizeを~~基準に，それ【内在的~size以外の何か？】を解決し直すモノトスル。 ◎ For any purpose other than calculating intrinsic sizes, a content-based minimum size (unlike an explicit min-content/etc minimum size) does not force the box’s size to become indefinite. However, if a percentage resolved against the box’s size before this minimum was applied, it must be re-resolved against the new size after it is applied.

7.1. 明示的な格子

［ `grid-template-rows$p, `grid-template-columns$p, `grid-template-areas$p ］~propは、 ~~共同で`格子~容器$の `明示的な筋@ を指定することにより， `明示的な格子@ を定義する。 最終的な格子は、［ `格子~駒$が`明示的な格子$の外側に配置されたときに，暗黙的に筋が追加される ］ため，より大きくなり得る。 この場合、 暗黙的な筋が作成され，それらの~sizeは［ `grid-auto-rows$p, `grid-auto-columns$p ］~propにより指定される。 ◎ The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container by specifying its explicit grid tracks. The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.

`明示的な格子$を成す筋rcの総本数【！size＊】は、［ `grid-template-areas$p により定義される筋rcの本数 ］と［ `grid-template-rows$p ／ `grid-template-columns$p により~sizeされる筋rcの本数 ］の大きい方として決定される。 ［ `grid-template-areas$p により定義された筋rcのうち，［ `grid-template-rows$p ／ `grid-template-columns$p ］~propから~sizeされないもの ］の~sizeは、［ `grid-auto-rows$p ／ `grid-auto-columns$p ］~propからとられる。 これらの~propが`明示的な格子$を成す筋を`まったく^em定義しない場合でも、 `明示的な格子$は，各~軸に 1 本の`罫$を包含する。 ◎ The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. If these properties don’t define any explicit tracks the explicit grid still contains one grid line in each axis.

`格子~配置~prop$における［ 正な／負な ］数量的~indexは、 `明示的な格子$の［ `始端$／`終端$ ］側から, かつ［ 1 ／ −1 ］から，罫を数える。 ◎ Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

［ `grid$p ／ `grid-template$p ］~propは、 3 つの `明示的な格子~prop@ — `grid-template-rows$p, `grid-template-columns$p, `grid-template-areas$p — すべてを，一括して設定するために利用できる`略式~prop$である。 `grid$p 略式~propは，`暗黙的な格子$を制御する~propも設定し直す一方で、 `grid-template$p ~propは，それらを変更しない。 ◎ The grid and grid-template properties are shorthands that can be used to set all three explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas) at the same time. The grid shorthand also resets properties controlling the implicit grid, whereas the grid-template property leaves them unchanged.

7.2. 明示的な筋の~sizing： `grid-template-rows^p, `grid-template-columns^p ~prop

［ `grid-template-columns$p ／ `grid-template-rows$p ］~propは、 ~spaceで分離された `筋~list@ として，`格子$を成す一連の［ ~col／~row ］用に［ `罫~名$, `筋~sizing関数$ ］を指定する。 ◎ These properties specify, as a space-separated track list, the line names and track sizing functions of the grid. The grid-template-columns property specifies the track list for the grid’s columns, while grid-template-rows specifies the track list for the grid’s rows.

各種 値の意味は： ◎ Values have the following meanings:

`none@vt

この~propからは，`明示的な格子$を成す筋は作成されないことを指示する （それでも，明示的な格子~筋は `grid-template-areas$p ~propにより作成され得る）。 ◎ Indicates that no explicit grid tracks are created by this property (though explicit grid tracks could still be created by grid-template-areas).

注記： `明示的な格子$が無い下では、 どの［ ~row／~col ］も `暗黙的に生成-＠#implicit-grids$され，それらの~sizeは［ `grid-auto-rows$p ／ `grid-auto-columns$p ］~propから決定されることになる。 ◎ Note: In the absence of an explicit grid any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.

`track-list$t | `auto-track-list$t

`筋~list$を，一連の［ `筋~sizing関数$, `罫~名$ ］として指定する。 各 `筋~sizing関数@ は： ◎ Specifies the track list as a series of track sizing functions and line names. Each track sizing function＼

• 次に挙げるいずれかとして指定できる：

  • 長さ（ `length$t ）
  • `格子~容器$の~sizeに対する百分率（ `percentage$t ）
  • 筋rcを占める内容の測定（ `min-content$vt, `max-content$vt ）
  • 格子~内の~free空間の割合分（ `flex$t ）

  【 この~listの和集合は、 下の構文の `track-breadth$t （から値 `auto^v を除いたもの）に該当する。 】

  ◎ can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid.＼
• または、 `minmax$f 記法による範囲として指定できる — その［ %min, %max ］引数に，前~項に挙げたいずれかの筋~sizing関数を与えて。 これらの引数は、 順に［ `~min筋~sizing関数$, `~max筋~sizing関数$ ］を与えることになる。 ◎ It can also be specified as a range using the minmax() notation, which can combine any of the previously mentioned mechanisms to specify separate min and max track sizing functions for the column or row.

`subgrid$vt `line-name-list$t?

`subgrid@vt 値は、 この値が`入子な格子$ %容器 の［ `grid-template-columns$p に指定された場合は %容器 の~col軸／ `grid-template-rows$p に指定された場合は %容器 の~row軸 ］を `下位格子~化@ することを指示する 【 %容器 は、その軸に関して`下位格子$になる】：

• %容器 は、 `下位格子~化$された軸において［ 格子~駒としての %容器 が`親~格子$内で~spanする部位 ］を受入れることになる。
• %容器 の`下位格子~化$された各~筋の~sizeは、 明示的に指定されることなく，`親~格子$の定義から採られる。
• %容器 内の各~駒は、 `親~格子$と共有される筋の`内在的~size$の計算に関与することになる （ `§ 内在的な筋~sizeを解決する＠#algo-content$ ）。

【 %容器 が`直交~flowを確立して$いる場合、 `下位格子~化$される［ ~col／~row ］は， %容器 の`親~格子$における［ ~row／~col ］として共有されることに注意。 】

◎ The subgrid value indicates that the grid will adopt the spanned portion of its parent grid in that axis (the subgridded axis). Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition, and the subgrid’s items will participate in the intrinsic size calculations (CSS Grid Layout 1 § 11.5 Resolve Intrinsic Track Sizes) of any tracks shared with the parent grid.＼

`下位格子$は、 本質的には，次の能を供する ⇒ 自身を通して、 親~格子の~parameter群を自身が入子にしている各~要素へ渡して， 各~要素の内容に基づく~sizingの情報を親~格子へ戻す。 ◎ Essentially, subgrids provide the ability to pass grid parameters down through nested elements, and content-based sizing information back up to their parent grid.

`line-name-list$t 引数は、 `親~格子$と共有される罫たちを，局所的に命名できるようにする。 与えられた場合，指定された各 `line-names$t は、 `下位格子$の`明示的な格子$を成す罫に，罫 1 から順にアテガわれる。 超過した `line-names$t は無視される。 ◎ The <line-name-list> argument allows local naming of the grid lines shared with the parent grid: if a <line-name-list> is given, the specified <line-names>s are assigned to the lines of the subgrid’s explicit grid, one per line, starting with line 1. Excess <line-names> are ignored.

この`格子~容器$は［ `入子な格子$でない【！`親~格子$は無い】場合／ `独立な整形~文脈$を確立するよう強制される場合 （例：`~layout封込め$ `CSS-CONTAIN-2$r や`絶対~位置決め$ `CSS-POSITION-3$r に因り） ］、 `使用~値$は初期~値 `none$vt になり，`下位格子$にはならない。 ◎ If there is no parent grid, or if the grid container is otherwise forced to establish an independent formatting context (for example, due to layout containment [CSS-CONTAIN-2] or absolute positioning [CSS-POSITION-3]), the used value is the initial value, none, and the grid container is not a subgrid.

`下位格子~化$されない軸は、 `自立的@ な軸と称される。 ◎ An axis that is not subgridded is a standalone axis.

`筋~list$の構文は： ◎ The syntax of a track list is:

`track-list@t
	= [ `line-names$t? [ `track-size$t | `track-repeat$t ] ]+
		`line-names$t?

`auto-track-list@t
	= [ `line-names$t? [ `fixed-size$t | `fixed-repeat$t ] ]*
		`line-names$t? `auto-repeat$t
	  [ `line-names$t? [ `fixed-size$t | `fixed-repeat$t ] ]*
		`line-names$t?

`explicit-track-list@t
	= [ `line-names$t? `track-size$t ]+ `line-names$t?

`line-name-list@t
	= [ `line-names$t | `name-repeat$t ]+

`track-size@t
	= `track-breadth$t
	| `minmax$vt( `inflexible-breadth$t , `track-breadth$t )
	| `fit-content$vt( `length-percentage [0,∞]$t ] )

`fixed-size@t
	= `fixed-breadth$t
	| `minmax$vt( `fixed-breadth$t , `track-breadth$t )
	| `minmax$vt( `inflexible-breadth$t , `fixed-breadth$t )

`track-breadth@t
	= `length-percentage [0,∞]$t
	| `flex [0,∞]$t
	| `min-content$vt
	| `max-content$vt
	| `auto$vt

`inflexible-breadth@t
	= `length-percentage [0,∞]$t
	| `min-content$vt
	| `max-content$vt
	| `auto$vt

`fixed-breadth@t
	= `length-percentage [0,∞]$t

`line-names@t
	= '[' `custom-ident$t* ']'

ここで、 各種 成分~値は以下に定義される… ◎ Where the component values are defined as follows…

`grid-template-columns$p: 100px 1fr max-content `minmax$vt(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);

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

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;

/* 
上と同じだが，より書き易い：
◎
same as above, except easier to write
*/
grid-template-columns:
     repeat(4, 10px [col-start] 250px [col-end])
               10px;

repeat( [ `integer [1,∞]$t | `auto-fill^v | `auto-fit^v ] , `track-list$t )

`track-repeat@t
	= repeat(
		[ `integer [1,∞]$t ],
		[ `line-names$t? `track-size$t ]+ `line-names$t? )

`auto-repeat@t
	= repeat(
		[ `auto-fill$v | `auto-fit$v ],
		[ `line-names$t? `fixed-size$t]+ `line-names$t? )

`fixed-repeat@t
	= repeat(
		[ `integer [1,∞]$t ],
		[ `line-names$t? `fixed-size$t ]+ `line-names$t? )

`name-repeat@t
	= repeat(
		[ `integer [1,∞]$t | `auto-fill$v ],
		`line-names$t+ )

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

const %s = getComputedStyle(%gridEl);
%gridEl.style.gridTemplateRows = %s.gridTemplateRows;

<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;
  // 解決d値は次になる：
  // [a] 50px [b] 320px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px
</script>

7.3. 有名~区画： `grid-template-areas^p ~prop

この~propは、 一連の `有名~区画@ を指定する。 それらの`区画$は、 特定0の`格子~駒$には結付けられないが， `格子~配置~prop$から名前を通して参照できるものになる。 `grid-template-areas$p ~propの構文は、 `格子$構造の可視化も供して， `格子~容器$の全体的な~layoutを理解し易くする。 ◎ This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

各種 値の意味は： ◎ Values have the following meanings:

`~none1@v

この~propからは、 `有名~区画$は定義されない — したがって`明示的な格子$を成す筋も定義されない — ことを指示する （それでも、 明示的な格子~筋は［ `grid-template-columns$p ／ `grid-template-rows$p ］~propにより作成され得る）。 ◎ Indicates that no named grid areas, and likewise no explicit grid tracks, are defined by this property (though explicit grid tracks could still be created by grid-template-columns or grid-template-rows).

注記： `明示的な格子$が無い下では、 どの［ ~row／~col ］も `暗黙的に生成-＠#implicit-grids$され，それらの~sizeは［ `grid-auto-rows$p ／ `grid-auto-columns$p ］~propから決定されることになる。 ◎ Note: In the absence of an explicit grid any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.

`string$t+

~listされた各~文字列ごとに， 1 本の~rowが作成される。 各~文字列は、 次に従って構文解析した上で，その中の各 `升~token@ — `有名~升~token$／`~null升~token$ — が【出現した順に】 ~row内の 1 個の升に対応する。 各~升ごとに【各~row内の，同じ位置に在る升たちが成す集合ごとに】，対応する~colが作成される： ◎ A row is created for every separate string listed for the grid-template-areas property, and a column is created for each cell in the string, when parsed as follows:

各~文字列は、 最長合致に基づいて，次に挙げる~tokenからなる~listに~token化されることになる：

• `識別子~符号位置$のみからなる並び ⇒ `有名~升~token@ を表現する。 その並びがそのまま名前を与える。 同じ名前を共有する`有名~升~token$たちが成す集合は、［ それらの~tokenに対応する`升$すべてに~spanする， 1 個の`有名~区画$ ］を作成する。
• `.^l （ `002E^U `FULL STOP^cn ）のみからなる並び ⇒ `~null升~token@ を表現する。 それは，`格子~容器$内の無名~区画を表現する。
• `空白$のみからなる並び ⇒ 何も表現しない （~tokenは生産しない）。
• その他の文字のみからなる並び ⇒ `~trash~token@ を表現する。 これは、 構文~errorであり，宣言は無効になる。

注記： `有名~升~token$は、 `ident$t 構文に合致しない升~名も生産し得る — `1st 2nd 3rd^l を与えた場合など。 そのような区画を他の~propから名前で参照する際には、 ~escapeを要する — 例えば，名前 `1st^v の区画を参照するときは、 次の様に ⇒ `grid-row^p: `\31st^v;

◎ Tokenize the string into a list of the following tokens, using longest-match semantics: • A sequence of ident code points, representing a named cell token with a name consisting of its code points. • A sequence of one or more "." (U+002E FULL STOP), representing a null cell token. • A sequence of whitespace, representing nothing (do not produce a token). • A sequence of any other characters, representing a trash token. ◎ Note: These rules can produce cell names that do not match the <ident> syntax, such as "1st 2nd 3rd", which requires escaping when referencing those areas by name in other properties, like grid-row: \31st; to reference the area named 1st. • A null cell token represents an unnamed area in the grid container. • A named cell token creates a named grid area with the same name. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. • A trash token is a syntax error, and makes the declaration invalid.

すべての文字列は、［ 1 個以上かつ互いに同じ個数 ］の`升~token$を定義しなければならない — さもなければ、 当の宣言は無効になる。 ◎ All strings must define the same number of cell tokens (named cell tokens and/or null cell tokens), and at least one cell token, or else the declaration is invalid.＼

`有名~区画$を成す`升$たちが［ 単独の, 穴の無い矩形 ］を形成していない場合、 当の宣言は無効になる。 ◎ If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

注記： この~moduleの将来~versionでは、 矩形でない, あるいは単連結でない領域も許可され得る。 ◎ Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

#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.4. 明示的な格子： `grid-template^p 略式~prop

`grid-template$p ~propは、［ `grid-template-rows$p, `grid-template-columns$p, `grid-template-areas$p ］を，単独の宣言で一括して設定するための`略式~prop$である。 この`略式~prop$の構文は，いくつかの異なる形をとる： ◎ The grid-template property is a shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration. It has several distinct syntax forms:

`none@v

すべての下位propを，各自の初期~値（ `none^v ）に設定する。 ◎ Sets all three properties to their initial values (none).

`grid-template-rows$tp / `grid-template-columns$tp

順に，［ `grid-template-rows$p, `grid-template-columns$p ］を指定された値に設定し、 `grid-template-areas$p は `none^v に設定する。 ◎ Sets grid-template-rows and grid-template-columns to the specified values, respectively, and sets grid-template-areas to none.

次のものは：

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

次と等価になる： ◎ is equivalent to

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

[ `line-names$t? `string$t `track-size$t? `line-names$t? ]+ [ / `explicit-track-list$t ]?

• `grid-template-areas$p を，［ ~listされている文字列（ `string^t ）の並び ］に設定する。 ◎ Sets grid-template-areas to the strings listed.
• `grid-template-rows$p を，次を順に施した結果に設定する ⇒＃ `string^t すべてを値から取り除く； `explicit-track-list^t が在れば直前の~slashとともに値から取り除く； `track-size^t が抜けている所には `auto$vt を補う； 2 個の `track-size^t に挟まれた連続する 2 個の `line-names^t は， 1 つに継ぎ合せる ◎ Sets grid-template-rows to the <track-size>s following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size.
• `grid-template-columns$p を， （~slashの後の）筋~list（ `explicit-track-list^t ）が指定されて［ いれば それ ／ いなければ `none$vt ］に設定する。 ◎ Sets grid-template-columns to the track listing specified after the slash (or none, if not specified).

この構文は、［ ~codeの中で、 一連の筋~名と~sizeを，それぞれに対応する区画に揃えて記せる ］よう設計されている。 ◎ This syntax allows the author to align track names and sizes inline with their respective grid areas.

次のものは：

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

次と等価になる： ◎ is equivalent to

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;

したがって、 次のような格子を作成する： ◎ and creates the following grid:

注記： `repeat$f 関数は，これらの筋~listには許容されない — 各~筋と, “~ASCII-art” 内の各 “筋rc” とは、 視覚的に一対一に~~揃うよう意図されているので。 ◎ Note: Note that the repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.

注記： `grid$p 略式~propも同じ構文を受容する — それは、 暗黙的な格子~propも，各自の初期~値に設定し直す。 したがって作者には、 これらを別々に~cascadeさせたいときは別として， `grid-template$p よりも `grid$p を利用することが推奨される。 ◎ Note: The grid shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Unless authors want those to cascade in separately, it is therefore recommended to use grid instead of grid-template.

7.5. 暗黙的な格子

［ `grid-template-rows$p ／ `grid-template-columns$p ／ `grid-template-areas$p ］~propは、 `明示的な格子$を形成する，固定d本数の筋を定義する。 その限界域の外側に`格子~駒$が位置された場合、 `格子~容器$は，`格子$に `暗黙的な罫@ を追加して， `暗黙的な筋@ を生成する。 これらの罫は、 `明示的な格子$と共に `暗黙的な格子@ を形成するようになる 【特に、暗黙的な格子は，明示的な格子を包含する】 。 ［ `grid-auto-rows$p ／ `grid-auto-columns$p ］~propは、 これらの`暗黙的な筋$, および［ `grid-template-areas$p により作成された`明示的な筋$のうち［ `grid-template-rows$p ／ `grid-template-columns$p ］により明示的に~sizeされていないもの ］を~sizeする。 ◎ The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid. The grid-auto-rows and grid-auto-columns properties size these implicit grid tracks, as well as any explicit grid tracks created by grid-template-areas but not explicitly sized by grid-template-rows or grid-template-columns

`grid-auto-flow$p ~propは、 明示的な位置を伴わない`格子~駒$の自動-配置を制御する。 暗黙的な筋は、 `明示的な格子$が埋められた後に，自動-配置により生成される。 ◎ The grid-auto-flow property controls auto-placement of grid items without an explicit position. Once the explicit grid is filled (or if there is no explicit grid) auto-placement will also cause the generation of implicit grid tracks.

`grid$p `略式~prop$は、 各種 `明示的な格子~prop$に加えて， 3 つの `暗黙的な格子~prop@ — `grid-auto-flow$p, `grid-auto-rows$p, `grid-auto-columns$p — も単独の宣言で設定できる。 ◎ The grid shorthand property can set the implicit grid properties (grid-auto-flow, grid-auto-rows, and grid-auto-columns) together with the explicit grid properties in a single declaration.

7.6. 暗黙的な筋の~sizing： `grid-auto-rows^p ／ `grid-auto-columns^p ~prop

［ `grid-auto-columns$p ／ `grid-auto-rows$p ］~propは、［ `grid-template-rows$p ／ `grid-template-columns$p ］により~sizeがアテガわれなかった`筋$の~sizeを指定する。 そのような筋のうち，明示的に~sizeされたものより［ 後に在るもの／前に在るもの ］は、 指定された各~size（ `track-size$t ）を［ 最初の筋から順に，そのままの順に／ 最後の筋から順に，最後から逆順に ］受取る。 ~sizeの個数が足りない場合は、 必要yなだけ~patternが繰返される。 【例えば 1 個だけ指定された場合、どの暗黙的な筋も同じ~sizeを受取ることになる。】 ◎ The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. If multiple track sizes are given, the pattern is repeated as necessary to find the size of the affected tracks. The first track after the last explicitly-sized track receives the first specified size, and so on forwards; and the last implicit grid track before the explicit grid receives the last specified size, and so on backwards.

注記： `格子~駒$が［ `grid-template-rows$p ／ `grid-template-columns$p ／ `grid-template-areas$p ］にて明示的に宣言されていない筋rcの中へ位置される場合、 それを保持するための`暗黙的な筋$が作成される。 これが起こり得るのは、［ 駒が，明示的に範囲~外の筋rcの中へ位置された ］とき, あるいは［ `自動-配置~algo$により，追加的な筋rcが作成された ］ときである。 ◎ Note: If a grid item is positioned into a row or column that is not explicitly declared by grid-template-rows/grid-template-columns and/or grid-template-areas, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row or column that is out of range, or by the auto-placement algorithm creating additional rows or columns.

<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^p ~prop

明示的に配置されていない`格子~駒$は、 後述する`自動-配置~algo$により， `格子~容器$の中の`未占有$な空間へ自動的に配置される。 `grid-auto-flow$p が、 自動-配置された駒を格子の中へ~flowさせる正確な方法を指定する — すなわち、 `自動-配置~algo$が どう働くかを制御する。 ◎ Grid items that aren’t explicitly placed are automatically placed into an unoccupied space in the grid container by the auto-placement algorithm. grid-auto-flow controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See § 8.5 Grid Item Placement Algorithm for details on precisely how the auto-placement algorithm works.

`row@v

各~駒は、 `自動-配置~algo$により［ 各~rowが埋まる度に，必要yなだけ新たな~rowを追加しながら ］置かれていく。 `row$v も `column$v も供されなかった場合、 `row^v と見做される。 ◎ The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

`column@v

各~駒は、 `自動-配置~algo$により［ 各~colが埋まる度に，必要yなだけ新たな~colを追加しながら ］置かれていく。 ◎ The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.

`dense@v

指定された場合、 自動-配置~algoでは， “稠密な” 収納-法~algoが利用される： それは、 後続の小さい駒により，大きい駒で埋められなかった格子の “穴埋め” を試みる。 そのため、 駒は順番どおりに現れなくなり得る。 ◎ If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

省略された場合、 “疎な” ~algoが利用される： 自動-配置~algoは、 格子~内に駒を配置していくときに “前に” しか進まず、 決して，後戻りして穴埋めすることはない。 これは、 自動-配置されるすべての駒が — 後続の駒で埋めれるような “穴” が残されていても — “順番どおりに” 現れるようにする。 ◎ If omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear “in order”, even if this leaves holes that could have been filled by later items.

注記： この~moduleの将来~levelにおいては、［ 自動-位置された駒を単独の “既定の” 升の中へまとめて~flowさせる ］ような値の追加-が予期されている。 ◎ Note: A future level of this module is expected to add a value that flows auto-positioned items together into a single “default” cell.

自動-配置では、 `order$p により`改変された文書~順序$で`格子~駒$を並べる。 ◎ Auto-placement takes grid items in order-modified document order.

form {
  display: grid;
  /* 
3 本の~colを定義する。
どれも内容から~sizeされ，対応する各~罫には名前が付与される。
◎
Define three columns, all content-sized, and name the corresponding lines.
*/
  grid-template-columns:
      [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  /* 
次に可用な~rowを自動的に見出しながら，すべての~labelを 名前 `labels^l の~colに配置する。
◎
Place all labels in the "labels" column and automatically find the next available row.
*/
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  /* 
次に可用な~rowを自動的に見出しながら，すべての~controlを 名前 `controls^l の~colに配置する。
◎
Place all controls in the "controls" column and automatically find the next available row.
*/
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* 
この駒を 1 本目の~row内の名前 `oversized^l の~colに自動-配置する。
駒が配置される 3 本の~rowに~spanする区画は、
他の明示的に配置される駒や区画,
あるいは，この区画に先立って自動的に配置されたどの駒とも、
重合しない。
◎
Auto place this item in the "oversized" column in the first row where an area that spans three rows won’t overlap other explicitly placed items or areas or any items automatically placed prior to this area.
*/
  grid-column: oversized;
  grid-row: span 3;
}

/* 
~formのすべての~buttonを，明示的に定義された区画~内に配置する。
◎
Place all the buttons of the form in the explicitly defined grid area.
*/
#buttons {
  grid-row: auto;

  /* 
~button区画を行内~軸~全体に~spanさせる。
◎
Ensure the button area spans the entire grid element in the inline axis.
*/
  grid-column: 1 / -1;
  text-align: end;
}

<form>
  <label for="姓">氏名（姓）</label>
  <input type="text" id="姓" name="name1">
  <label for="名">氏名（名）</label>
  <input type="text" id="名" name="name2">
  <label for="郵">〒郵便番号</label>
  <input type="text" id="郵" name="zip">
  <label for="県">都道府県</label>
  <select type="text" id="県" name="fuken">
    <option value="東京">東京都</option>
  </select>
  <label for="市区番">市区町村・番地</label>
  <input type="text" id="市区番" name="address1">
  <label for="号室">建物名・号室</label>
  <input type="text" id="号室" name="address2">

  <div id="department-block">
    <label for="科">所属科</label>
    <select id="科" name="department" multiple>
      <option value="あ">あっち系</option>
      <option value="そ">そっち系</option>
      <option value="こ">こっち系</option>
      <option value="に">にっち系</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">取り消し</button>
    <button id="back">戻る</button>
    <button id="next">次へ</button>
  </div>
</form>

7.8. 格子~定義： `grid^p 略式~prop

`grid$p ~propは、 各種［ `明示的な格子~prop$, `暗黙的な格子~prop$ ］すべてを単独の宣言で一括して設定するための`略式~prop$である （これは、 `側溝$~propを設定し直すことはない）。 ◎ The grid property is a shorthand that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. (It does not reset the gutter properties.)

その構文は、 `grid-template$p の構文に［ 自動~flowによる格子を定義する形を成す構文 ］を追加したものになる： ◎ Its syntax matches grid-template, plus an additional syntax form for defining auto-flow grids:

`grid-template$tp

`grid-template$p の各~下位propを `grid-template$p と同じように設定する。 各 `grid-auto-*^p 下位propを それらの初期~値に設定する。 ◎ Sets the grid-template longhands as as for grid-template, and the grid-auto-* longhands to their initial values.

`grid-template-rows$tp / [ `auto-flow^v && `dense$v? ] `grid-auto-columns$tp?

[ `auto-flow^v && `dense$v? ] `grid-auto-rows$tp? / `grid-template-columns$tp

いずれも、 一方の軸の筋たちは 明示的に設定する （ `grid-template-rows$p, `grid-template-columns$p のうち一方は指定されたとおりに, 他方は `none^v に設定する） 一方で，他方の軸の筋たちは 自動で繰返す方法を指定する （ `grid-auto-rows$p, `grid-auto-columns$p のうち一方を指定されたとおりに, 他方は `none^v に設定する） ことにより、 自動~flowを設定する。 `grid-auto-flow$p も，指定されたとおりに （ `row$v または `column$v に, および `dense$v が指定されていれば それも） 設定する。 ◎ Sets up auto-flow, by setting the tracks in one axis explicitly (setting either grid-template-rows or grid-template-columns as specified, and setting the other to none), and specifying how to auto-repeat the tracks in the other axis (setting either grid-auto-rows or grid-auto-columns as specified, and setting the other to auto). grid-auto-flow is also set to either row or column accordingly, with dense if it’s specified.

他のすべての`下位prop$は、 各自の初期~値に設定する。 ◎ All other grid sub-properties are reset to their initial values.

注記： 単独の `grid$p 宣言で指定できるのは、 各種［ 明示的 ／ 暗黙的 ］な格子~propのうち，片方の軸に限られる。 指定しなかった下位propは、 通常の略式~propと同じく，初期~値に設定される。 ◎ Note: Note that you can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands.

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-*^p 下位propが各自の初期~値をとる場合 ］には， `grid-template$p 構文が利用される。 ◎ When serializing, if all the grid-auto-* longhands have their initial values, the grid-template syntax is used.

8.1. 格子~配置~用の共通な~pattern

`格子~配置~prop$の下位propは、 3 個の`略式~prop$に整理される： ◎ The grid-placement property longhands are organized into three shorthands:

article {
  grid-area: main;
  /* 
駒を有名~区画 `main^l の中へ配置する。
◎
Places item into the named area "main".
*/
}

.one {
  grid-row-start: main;
  /* 
~row-始端~辺を `main^l 有名~区画の始端~辺に整列させる。
◎
Align the row-start edge to the start edge of the "main" named area.
*/
}

.two {
  grid-row: 2;    /* 
駒を 2 本目の~row内に配置する。
◎
Place item in the second row.
*/
  grid-column: 3; /* 
駒を 3 本目の~col内に配置する。
◎
Place item in the third column.
*/
    /* 
`grid-area^p: `2 / 3^v;
と等価。
◎
Equivalent to grid-area: 2 / 3;
*/
}

.three {
  `grid-row$p: 2 / span 5;
  /* 
2 本目の~rowが始端になり，そこから
5 本~先の~rowまで~spanする
（ 7 本目の~rowが終端になる）。
◎
Starts in the 2nd row, spans 5 rows down (ending in the 7th row).
*/
}

.four {
  grid-row: span 5 / 7;
  /* 
7 本目の~rowが`終端になり^em，そこから
5 本~前の~rowまで~spanする
（ 2 本目の~rowが始端になる）。
◎
Ends in the 7th row, spans 5 rows up (starting in the 2nd row).
*/
}

.five {
  grid-column: first / middle;
  /* 
罫 `first^l から罫 `middle^l まで~spanする。
◎
Span from line "first" to line "middle".
*/
}

.six {
  grid-row: text 5 / text 7;
  /* 
名前 `text^l の罫のうち， 5 本目から 7 本目まで~spanする
◎
Span between the 5th and 7th lines named "text".
*/
  grid-row: text 5 / span text 2;
  /* 
上と同じ
— 5 本目の名前 `text^l の罫から さらに `text^l 罫を 2 本， 7 本目まで~spanする。
◎
Same as above - start at the 5th line named "text", then span across two more "text" lines, to the 7th.
*/
}

.eight {
  grid-area: auto; /* 
初期~値
◎
Initial value
*/
}

.nine {
  grid-area: span 2 / span 3;
  /* 
駒は 2 × 3 本の ~row × ~colを覆うように自動-配置される。
◎
Auto-placed item, covering two rows and three columns.
*/
}

8.2. 格子~駒の配置 vs. ~source順序

“大いなる力には大いなる責任が伴う” ◎ “With great power comes great responsibility.”

`格子~配置~prop$の能は、 内容を`格子$の中で並替えて自由に配列して、 視覚的な呈示を［ 下層の文書~source順序から大きく違える ］ことも可能にする。 この能により，作者は、 例えば`媒体~query$を利用して， 異なる機器や~modeの下で呈示の描画を自由に誂えることも可能になる。 ただし、 これは，~sourceに対する正しい順序付けの代用ではないことに注意。 ◎ The abilities of the grid-placement properties allow content to be freely arranged and reordered within the grid, such that the visual presentation can be largely disjoint from the underlying document source order. These abilities allow the author great freedom in tailoring the rendering to different devices and modes of presentation e.g. using media queries. However they are not a substitute for correct source ordering.

正しい~source順序は、［ 発話 ／ 連列的~navi（~keyboard~naviなど） ／ 探索~engine ／ 触覚~browser ］等々の非~CSS~UAにとって重要になる。 格子~配置は、 視覚的な呈示`のみに^em影響することに注意。 これにより，作者は、 文書~sourceを［ 非~CSS ／ 視覚的でない対話~mode ］用に最適化しつつ、 格子~配置の技法を利用して， ~source順序に触れることなく視覚的な呈示を操作できるようになる。 ◎ Correct source order is important for speech, for sequential navigation (such as keyboard navigation), and non-CSS UAs such as search engines, tactile browsers, etc. Grid placement only affects the visual presentation! This allows authors to optimize the document source for non-CSS/non-visual interaction modes, and use grid placement techniques to further manipulate the visual presentation so as to leave that source order intact.

8.3. 罫に基づく配置： `grid-row-start^p, `grid-column-start^p, `grid-row-end^p, `grid-column-end^p ~prop

`grid-line@t
	= `~autoP$v
	| `custom-ident$t
	| [ [ `integer [−∞,−1]$t | `integer [1,∞]$t ] && `custom-ident$t? ]
	| [ `span^v && [ `integer [1,∞]$t || `custom-ident$t ] ]

［ `grid-row-start$p, `grid-column-start$p, `grid-row-end$p, `grid-column-end$p ］~propは、 `格子$の中の`格子~駒$の`~span数$【！~size】と所在を決定する。 すなわち、 駒の`配置$に［ 罫の位置や~span数についての情報を供与するか，何も供与しない（自動的に配置する） ］ことを通して，駒が置かれる`区画$は どの罫を［ `行内-始端$, `塊-始端$, `行内-終端$, `塊-終端$ ］辺とするかを指定する。 ◎ The grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start, block-start, inline-end, and block-end edges of its grid area.

各種 値の意味は： ◎ Values have the following meanings:

`custom-ident$t

最初に、 `有名~区画$の辺に合致するかどうか試みる： `custom-ident^t に与えられた名前 %foo が［ `grid-*-start^p ／ `grid-*-end^p ］~propに指定されていて，`罫~名$として［ `foo-start^l ／ `foo-end^l ］を有する`罫$は在るならば、 それらのうち最初の罫を`格子~駒$の`配置$に供与する。 ◎ First attempt to match the grid area’s edge to a named grid area: if there is a grid line whose line name is <custom-ident>-start (for grid-*-start) / <custom-ident>-end (for grid-*-end), contributes the first such line to the grid item’s placement.

注記： `有名~区画$は，この形の`暗黙的にアテガわれる罫~名$を自動的に生成するので、 `grid-row-start$p: %foo を指定すれば， %foo と命名された`有名~区画$の始端~辺を選ぶことになる — それより前【始端~側】に， `明示的にアテガわれる罫~名$として同じ `foo-start^l を伴う罫は無いならば。 ◎ Note: Named grid areas automatically generate implicitly-assigned line names of this form, so specifying grid-row-start: foo will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).

他の場合、 "`foo^v" の代わりに "`1 foo^v" が指定されていたかのように扱う。 【次項で取扱われる。】 ◎ Otherwise, treat this as if the integer 1 had been specified along with the <custom-ident>.

【 %foo と命名された`有名~区画$がある下で， `grid-row-start^p: `foo-start^v の様に接尾辞も含めて指定した場合、 `foo-start^l と（紛らわしく）命名された`有名~区画$が無い限り，これに該当する — その結果は、 %foo を指定したときと同じになる。 】

【 `grid-*-start^p が供与する罫が `grid-*-end^p が供与する罫と同じか より後に位置する場合に どうなるかは、 `§ 格子~配置における競合の取扱い＠#grid-placement-errors$にて述べられる （以下も同様）。 】

[ `integer [−∞,−1]$t | `integer [1,∞]$t ] && `custom-ident$t?

%N を `integer^t に与えられた整数とする。 `integer^t のみ与えられた場合、 %N 本目の`罫$を`格子~駒$の`配置$に供与する。 %N が負である場合、 `明示的な格子$の終端~辺から逆順に数える。 ◎ Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.

【 %N ~EQ ［ 1 ／ −1 ］が`明示的な格子$の［ 始端／終端 ］罫に対応する。 結果の罫が`明示的な格子$の［ 終端~辺／始端~辺 ］を超える場合、 `暗黙的な罫$を供与することになる。 】

`custom-ident$t として`罫~名$も与えられた場合、 その名前を伴う罫に限り数えられる （その名前を伴う`罫$のうち %N 本目を供与する）。 この目的においては、 `暗黙的な罫$は，すべて その名前を伴うものと見做される （したがって，`明示的な格子$内の該当する罫の本数が %N に満たない場合、 `暗黙的な罫$を供与することになる）。 ◎ If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

`integer$t に対する値 0 は、 宣言を無効にする。 ◎ An <integer> value of zero makes the declaration invalid.

`span^v && [ `integer [1,∞]$t || `custom-ident$t ]

%N を `integer^t に与えられた整数とする。 `integer^t のみ与えられた場合、 `~span数$として %N を`格子~駒$の`配置$に供与する。 すなわち、［ `格子~駒$が占める`区画$の，この~propに対応する辺 ］を，その対辺†から %N 本目††の所に~~位置させる。 例えば `grid-column-end$p に対する `span 2^v は、 `grid-column-start$p 罫から終端~方向に在る 2 本目の罫を指示する。 ◎ Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is N lines from its opposite edge in the corresponding direction. For example, grid-column-end: span 2 indicates the second grid line in the endward direction from the grid-column-start line.

【† 対辺とは、 この~span数が `grid-row-end^p に指定されているならば， `grid-row-start^p から指定される罫を指す （ `-end^l と `-strat^l を入れ替えても， あるいは `-row-^l を `-column-^l に置き換えても同様）。 したがって［ `grid-row-start^p, `grid-row-end^p ］の両者に この形による値が与えられた場合，定義が循環するが、 その場合の取扱いは `§ 格子~配置における競合の取扱い＠#grid-placement-errors$にて述べられる。 】【†† 対辺~自身は 0 本目。 例えば `span 2^v は “2 本の筋に~spanする” ことを表す。 】【 対辺が指定されていない場合（ `auto^v ）、 それが指す罫は，`自動-配置~algo$に従って決定される。 】

`custom-ident$t も与えられた場合、 その名前を伴う罫に限り数えられる （そのような`罫$のうち %N 本目を指すことになる）。 この目的においては、 `暗黙的な罫$のうち［ `明示的な格子$の探索していく方向に対応する側に在るもの ］は，すべて その名前を伴うものと見做される （したがって，`明示的な格子$内の該当する罫の本数が %N に満たない場合、 `暗黙的な罫$を指すことになる）。 ◎ If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

【 この事例でも、 対辺が指定されていない場合，駒は自動-配置されるが、 それに加え，~span数も 1 と見做される。 】

例えば、 次の宣言が与えられた下では： ◎ For example, given the following declarations:

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

`格子~容器$（ `.grid^css ）には，`明示的にアテガわれる罫~名$は無く、 `明示的な格子$は 2 本の`罫$（罫 1, 罫 2 ）からなるとする。 `格子~駒$（ `.griditem^css ）の ~col-終端~辺は罫 4 の所に指定されるので、 `暗黙的な格子$の終端~側に 2 本の罫が生成される。 ◎ The grid container has an explicit grid with two grid lines, numbered 1 and 2. The grid item’s column-end edge is specified to be at line 4, so two lines are generated in the endward side of the implicit grid.

その~col-始端~辺は，始端~方向に見出される最初の `foo^l 罫でなければナラナイが、 格子~内には `foo^l 罫は無いので，その罫は`暗黙的な格子$内にあることになる。 罫 3 はその候補でない — それは，`明示的な格子$の終端~側にあり、 `grid-column-start$p に指定された `span$v は，該当する罫を始端~方向へ探索するよう強制しているので。 よって、 `明示的な格子$の始端~側に，`暗黙的な格子$用の罫が生成されることになる。 ◎ Its column-start edge must be the first "foo" line it can find startward of that. There is no "foo" line in the grid, though, so the only possibility is a line in the implicit grid. Line 3 is not a candidate, because it’s on the endward side of the explicit grid, while the grid-column-start span forces it to search startward. So, the only option is for the implicit grid to generate a line on the startward side of the explicit grid.

`integer$t が省略された場合の既定は `1^v とする。 負な整数や 0 は無効になる。 ◎ If the <integer> is omitted, it defaults to 1. Negative integers or zero are invalid.

`~autoP@v

~propは、 `格子~駒$の`配置$に何も供与しない。 すなわち、［ `自動-配置$ ／ 既定の~span数 1 ］のいずれかにすることを指示する （ `§ 格子~駒の配置-法＠#placement$を見よ）。 ◎ The property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of one. (See § 8 Placing Grid Items, above.)

上の どの生成規則の `custom-ident$t においても，~keyword `span$v, `auto^v は除外される。 ◎ In all the above productions, the <custom-ident> additionally excludes the keywords span and 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
（ 5 = 4 + 既定の~span数）
◎
Line 4 to line 5
*/

grid-column-start: auto; grid-column-end: 6;
/* 
罫 5 〜 罫 6
（ 5 = 6 − 既定の~span数）
◎
Line 5 to line 6
*/

grid-column-start: C; grid-column-end: C -1;
/* 
罫 3 〜 罫 9
（ 3 = 始端~側から最初の `C^c, 9 = 終端~側から最初の `C^c ）
◎
Line 3 to line 9
*/

grid-column-start: C; grid-column-end: span C;
/* 
罫 3 〜 罫 6
（ 6 = 3 から終端~方向に在る次の `C^c ）
◎
Line 3 to line 6
*/

grid-column-start: span C; grid-column-end: C -1;
/* 
罫 6 〜 罫 9
（ 6 = 9 から始端~方向に在る次の `C^c ）
◎
Line 6 to line 9
*/

grid-column-start: span C; grid-column-end: span C;
/* 
~error：
まず，始端, 終端とも `span$v を指定しているので、
終端に指定された~spanは無視される。
その結果、
駒は自動-配置され，命名された罫【！有名~罫】には~spanし得ない。
`grid-column$p: `span 1^v;
と等価になる。
◎
Error: The end span is ignored, and an auto-placed item can’t span to a named line. Equivalent to grid-column: span 1;.
*/

grid-column-start: 5; grid-column-end: C -1;
/* 
罫 5 〜 罫 9
◎
Line 5 to line 9
*/

grid-column-start: 5; grid-column-end: span C;
/* 
罫 5 〜 罫 6
（ 6 = 5 から終端~方向に在る次の `C^c ）
◎
Line 5 to line 6
*/

grid-column-start: 8; grid-column-end: 8;
/* 
~error：罫 8 〜 罫 9 になる
◎
Error: line 8 to line 9
*/

grid-column-start: B 2; grid-column-end: span 1;
/* 
罫 5 〜 罫 6
（ 5 = 始端~側から 2 個目の `B^c, 6 = 5 + 1 ）
◎
Line 5 to line 6
*/

8.4. 配置： `grid-column^p, `grid-row^p, `grid-area^p 略式~prop

`grid-row$p ~propは［ `grid-row-start$p, `grid-row-end$p ］に対応する`略式~prop$であり， `grid-column$p ~propは［ `grid-row-start$p, `grid-row-end$p ］に対応する`略式~prop$である。 ◎ The grid-row and grid-column properties are shorthands for grid-row-start/grid-row-end and grid-column-start/grid-column-end, respectively.

文法の~slashの 前／後 に与えられた値が，下位prop［ `grid-*-start^p ／ `grid-*-end^p ］を設定する。 ◎ If two <grid-line> values are specified, the grid-row-start/grid-column-start longhand is set to the value before the slash, and the grid-row-end/grid-column-end longhand is set to the value after the slash.

~slashの後の値が省略された場合、 下位prop `grid-*-end^p は，［ ~slashの前の値が `custom-ident$t であるならば それと同じ値 ／ 他の場合は `~autoP$v ］に設定される。 ◎ When the second value is omitted, if the first value is a <custom-ident>, the grid-row-end/grid-column-end longhand is also set to that <custom-ident>; otherwise, it is set to auto.

`grid-area$p ~propは、［ `grid-row-start$p, `grid-column-start$p, `grid-row-end$p, `grid-column-end$p ］用の略式である。 ◎ The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

4 個の `grid-line$t 値は、 順に［ `grid-row-start$p, `grid-column-start$p, `grid-row-end$p, `grid-column-end$p ］の値を設定する。 ただし，指定された値の個数が： ◎ If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value.

注記： この略式~propの各~成分~値は、 `row-start^p から順に，左横書きの~pageでは時計回りに†, 右横書きの~pageでは反~時計回りに 4 辺を指定することになる。 【†原文の “CCW” （ `counterclockwise^en ）は “CW”（ `clockwise^en ）の誤りと見られる。】 ◎ Note: The resolution order for this shorthand is row-start/column-start/row-end/column-end, which goes CCW for LTR pages, the opposite direction of the related 4-edge properties using physical directions, like margin.

8.5. 格子~駒の自動-配置~algo

位置が`自動的$posにされた`格子~駒$は、 以下に与える `格子~駒の配置~algo@ により， どの`格子~駒$も — きちんと定義された`区画$に~lay-outされるよう — `確定的$posな位置に解決される。 （`~span数$は，特別に解決される必要はない — 明示的に指定されていない場合、 既定~の 1 になるので。 【したがって，以下の~algoにおいては、駒の［ `~row-始端 罫$, `~col-始端 罫$ ］のみを決定することになる。】 ） ◎ The following grid item placement algorithm resolves automatic positions of grid items into definite positions, ensuring that every grid item has a well-defined grid area to lay out into. (Grid spans need no special resolution; if they’re not explicitly specified, they default to 1.)

注記： この~algoは、［ `明示的な格子$内に，自動-位置された`格子~駒$を配置する部屋 ］が足りなくなったときには， `暗黙的な格子$内に新たな筋rcを作成する。 ◎ Note: This algorithm can result in the creation of new rows or columns in the implicit grid, if there is no room in the explicit grid to place an auto-positioned grid item.

どの`升$も，初期~時には `未占有@ とされ、 ~algoの中で［ 位置が確定された`格子~駒$が占める`区画$ ］に覆われる升が `占有-済み@ に変化する。 ◎ Every grid cell (in both the explicit and implicit grids) can be occupied or unoccupied. A cell is occupied if it’s covered by the grid area of a grid item with a definite grid position; otherwise, the cell is unoccupied. A cell’s occupied/unoccupied status can change during this algorithm.

明快にするため、 この~algoは，［ `grid-auto-flow$p に `row$v が指定されている ］ことを前提に記されている。 `column$v に設定されている下では、 この~algoの中に~~現れる ~rowと~col すべてを入替える。 ◎ To aid in clarity, this algorithm is written with the assumption that grid-auto-flow has row specified. If it is instead set to column, swap all mentions of rows and columns, inline and block, etc. in this algorithm.

注記： 自動-配置~algoは、 論理的な文書~順序ではなく `order$p により`改変された文書~順序$の下で，`格子~駒$たちに対し働く。 ◎ Note: The auto-placement algorithm works with the grid items in order-modified document order, not their original document order.

1. `§ 格子~駒＠#grid-items$にて述べたとおりに， 匿名な格子~駒を生成する （匿名な`格子~駒$は、 常に自動-配置される — それらの~boxには`格子~配置~prop$は指定できないので）。 ◎ Generate anonymous grid items as described in § 6 Grid Items. (Anonymous grid items are always auto-placed, since their boxes can’t have any grid-placement properties specified.)
2. 自動-位置されてないものを位置させる ◎ Position anything that’s not auto-positioned.

3. （~rowが確定的である駒を処理する） ◎ Process the items locked to a given row.

   `格子~駒$のうち，~row位置が`確定的$posである （すなわち、 ~row位置は［ `grid-row-start$p, `grid-row-end$p ］~propから`確定的$posに定義される） ~EACH( %駒 ) に対し， `order$p により`改変された文書~順序$で： ◎ For each grid item with a definite row position (that is, the grid-row-start and grid-row-end properties define a definite grid position), in order-modified document order:

   “疎” な収納-法の場合 （既定の挙動） ◎ “sparse” packing (default behavior)

   %駒 の`配置$の`~col-始端 罫$ ~SET 次を満たすような最~小な正な~index ⇒ ［ %駒 が占める`区画$は、 `占有-済み$のどの升にも重合しない ］~AND［ これまでに［ この段にて この~rowに配置された，どの`格子~駒$の`~col-始端 罫$ ］よりも大きい ］ ◎ Set the column-start line of its placement to the earliest (smallest positive index) line index that ensures this item’s grid area will not overlap any occupied grid cells and that is past any grid items previously placed in this row by this step.

   “稠密” な収納-法の場合 （ `dense$v が指定されている） ◎ “dense” packing (dense specified)

   %駒 の`配置$の`~col-始端 罫$ ~SET 次を満たすような最~小な正な~index ⇒ %駒 が占める`区画$は`占有-済み$のどの升にも重合しない ◎ Set the column-start line of its placement to the earliest (smallest positive index) line index that ensures this item’s grid area will not overlap any occupied grid cells.

4. （`暗黙的な格子$に含まれる~colたちを決定する） ◎ Determine the columns in the implicit grid.

   次に従って，`暗黙的な格子$内に~colを作成する： ◎ Create columns in the implicit grid:

   1. 前~段までに~col位置は確定された駒 （明示的に位置されているもの ／ 前~段により位置されたもの ／ まだ位置されていないが~col位置は`確定的$posであるもの） すべてを収容するため、 必要yなだけ，`暗黙的な格子$に~colを追加する。 【 `span$v 値の`例＠#_dgm-implicit-lines-search$に示したように、始端~側に追加される場合もある。】 ◎ Start with the columns from the explicit grid. ◎ Among all the items with a definite column position (explicitly positioned items, items positioned in the previous step, and items not yet positioned but with a definite column) add columns to the beginning and end of the implicit grid as necessary to accommodate those items.
   2. 前~段までに~col位置は確定されていない駒のうち［ `~span数$が`暗黙的な格子$の~col数【！＊width】を超えるもの ］すべてを収容するため、 必要に応じて，`暗黙的な格子$の終端に~colを追加する。 ◎ If the largest column span among all the items without a definite column position is larger than the width of the implicit grid, add columns to the end of the implicit grid to accommodate that column span.

   例えば、 次の style 片の場合： ◎ For example, in the following style fragment:

   #grid {
     display: grid;
     grid-template-columns: repeat(5, 100px);
     grid-auto-flow: row;
   }
   #grid-item {
     grid-column: 4 / span 3;
   }
   

   必要な~col数は 6 になる。 明示的な格子は， （ `grid-template-columns$p から） 罫 1 〜 罫 6 までの 5 本の~colを供するが、 `#grid-item^c の~col位置は罫 7 で終端することを意味するので， 暗黙的な格子の終端に~colを追加することが要求される。 ◎ The number of columns needed is 6. The explicit grid provides 5 columns (from grid-template-columns) with lines number 1 through 6, but #grid-item’s column position means it ends on line 7, which requires an additional column added to the end of the implicit grid.

5. （まだ位置が確定されていない，残りの`格子~駒$たちの位置を確定する） ◎ Position the remaining grid items.

   以下においては：

   • %駒~list は、 それらの駒たちが成す， `order$p により`改変された文書~順序$による~listを表すとする。
   • ［ `最~始端~col罫^i ／ `最~始端~row罫^i ／ `最~終端~col罫^i ］は、 `暗黙的な格子$の周を成す［ 最も始端に在る~col罫 ／ 最も始端に在る~row罫 ／ 最も終端に在る~col罫 ］（の~index）を表すとする — これらは、 前~段までに確定されている。
   • 変数 ( %~row位置, %~col位置 ) の組 — `自動-配置~cursor@ — は、 `暗黙的な格子$内の現在の “駒の挿入地点” とされる ( ~row`罫$, ~col`罫$ ) を表す （すなわち、 以下に現れる “%駒 が占める区画” は，駒の ( `~row-始端 罫$, `~col-始端 罫$ ) が ( %~row位置, %~col位置 ) であったとするときに占める区画を表す）。 初期~時には ( `最~始端~row罫^i, `最~始端~col罫^i ) に設定されているとする。
   • %~row位置 が増やされる所では、 必要なら（駒を収容する部屋が足りなくなったときは）， `暗黙的な格子$ 内に新たな~rowを作成するとする。

   【 “自動-配置~cursor” 以外の，ここに挙げた規約は、 原文にて以下に現れていた記述を，この訳にて集約して補完したものである。 】

   ◎ The auto-placement cursor defines the current “insertion point” in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

   一連の駒を位置させる方法は、 利用-中にある `grid-auto-flow$p 値から決定される： ◎ The grid-auto-flow value in use determines how to position the items:

   “疎” な収納-法 （既定の挙動） ◎ “sparse” packing (default behavior)

   %駒~list を成す ~EACH( %駒 ) に対し： ◎ For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

   1. ~IF［ %駒 の~col位置は`確定的$posである ］： ◎ If the item has a definite column position:

      1. ~IF［ %駒 の`~col-始端 罫$ ~LT %~col位置 ］ ⇒ %~row位置 ~INCBY 1 ◎ ↓
      2. %~col位置 ~SET %駒 の`~col-始端 罫$ ◎ Set the column position of the cursor to the grid item’s column-start line. If this is less than the previous column position of the cursor, increment the row position by 1.
      3. ~WHILE［ %駒 が占める`区画$は`占有-済み$のある`升$に重合する ］ ⇒ %~row位置 ~INCBY 1 ◎ Increment the cursor’s row position until a value is found where the grid item does not overlap any occupied grid cells (creating new rows in the implicit grid as necessary).
      4. %駒 の`~row-始端 罫$ ~SET %~row位置 ◎ Set the item’s row-start line to the cursor’s row position, and set the item’s row-end line according to its span from that position.

   2. ~ELSE （ %駒 の位置は両~軸とも`自動的$pos）： ◎ If the item has an automatic grid position in both axes:

      1. ~WHILE 無条件：

         1. ~WHILE［ %駒 が占める`区画$は`占有-済み$のある`升$に重合する ］ ⇒ %~col位置 ~INCBY 1
         2. ~IF［ ( %~col位置 + %駒 の~col`~span数$ ) ~LTE `最~終端~col罫^i ］ ⇒ ~BREAK
         3. %~row位置 ~INCBY 1
         4. %~col位置 ~SET `最~始端~col罫^i
         ◎ Increment the column position of the auto-placement cursor until either this item’s grid area does not overlap any occupied grid cells, or the cursor’s column position, plus the item’s column span, overflow the number of columns in the implicit grid, as determined earlier in this algorithm. ◎ If a non-overlapping position was found in the previous step, set the item’s row-start and column-start lines to the cursor’s position. Otherwise, increment the auto-placement cursor’s row position (creating new rows in the implicit grid as necessary), set its column position to the start-most column line in the implicit grid, and return to the previous step.
      2. %駒 の ⇒＃ `~row-始端 罫$ ~SET %~row位置； `~col-始端 罫$ ~SET %~col位置 ◎ ↑

   “稠密” な収納-法 （ `dense$v が指定されている） ◎ “dense” packing (dense specified)

   %駒~list を成す ~EACH( %駒 ) に対し： ◎ For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

   1. %~row位置 ~SET `最~始端~row罫^i ◎ ↓↓

   2. ~IF［ %駒 の~col位置は`確定的$posである ］： ◎ If the item has a definite column position:

      1. %~col位置 ~SET %駒 の`~col-始端 罫$ ◎ Set the row position of the cursor to the start-most row line in the implicit grid. Set the column position of the cursor to the grid item’s column-start line.
      2. ~WHILE［ %駒 が占める`区画$は`占有-済み$のある升に重合する ］ ⇒ %~row位置 ~INCBY 1 ◎ Increment the auto-placement cursor’s row position until a value is found where the grid item does not overlap any occupied grid cells (creating new rows in the implicit grid as necessary).
      3. %駒 の`~row-始端 罫$ ~SET %~row位置 ◎ Set the item’s row-start line index to the cursor’s row position. (Implicitly setting the item’s row-end line according to its span, as well.)

   3. ~ELSE （ %駒 の位置は両~軸とも`自動的$pos）： ◎ If the item has an automatic grid position in both axes:

      1. ~WHILE 無条件：

         1. %~col位置 ~SET `最~始端~col罫^i
         2. ~WHILE［ %駒 が占める`区画$は`占有-済み$のある升に重合する ］ ⇒ %~col位置 ~INCBY 1
         3. ~IF［ ( %~col位置 + %駒 の~col`~span数$ ) ~LTE `最~終端~col罫^i ］ ⇒ ~BREAK
         4. %~row位置 ~INCBY 1
         ◎ Set the cursor’s row and column positions to start-most row and column lines in the implicit grid. ◎ Increment the column position of the auto-placement cursor until either this item’s grid area does not overlap any occupied grid cells, or the cursor’s column position, plus the item’s column span, overflow the number of columns in the implicit grid, as determined earlier in this algorithm. ◎ If a non-overlapping position was found in the previous step, set the item’s row-start and column-start lines to the cursor’s position. Otherwise, increment the auto-placement cursor’s row position (creating new rows in the implicit grid as necessary), reset its column position to the start-most column line in the implicit grid, and return to the previous step.
      2. %駒 の ⇒＃ `~row-始端 罫$ ~SET %~row位置； `~col-始端 罫$ ~SET %~col位置 ◎ ↑

10.1. 包含塊が格子~容器により生成されているとき

`絶対的に位置され$た要素の`包含塊$が，`格子~容器$により生成されている場合、 その包含塊の辺は，その要素の`格子~配置~prop$から決定される`区画$の辺になる。 各種~offset~prop （ `top$p, `right$p, `bottom$p, `left$p ）は、 通常通り，この`包含塊$の対応する辺から 内方への~offsetを指示する。 ◎ If an absolutely positioned element’s containing block is generated by a grid container, the containing block corresponds to the grid area determined by its grid-placement properties. The offset properties (top/right/bottom/left) then indicate offsets inwards from the corresponding edges of this containing block, as normal.

注記： `格子~容器$に対する`絶対的に位置され$た要素も，その容器の`罫$に整列させれるが、 そのような要素は，空間を（排他的に）占めたり, その格子の~layoutに関与することはない。 ◎ Note: While absolutely-positioning an element to a grid container does allow it to align to that container’s grid lines, such elements do not take up space or otherwise participate in the layout of the grid.

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* 
`格子~容器$を埋める，それぞれ同じ太さの 4 本の~row と,
それぞれ同じ太さ `10rem^v の 4 本の~col
◎
4 equal-height rows filling the grid container, 4 columns of 10rem each 
*/
  justify-content: center;
  /* 
格子の内容を，`格子~容器$の中で横方向に中央寄せにする
◎
center the grid horizontally within the grid container
*/
  position: relative;
  /* 
`絶対~位置決め包含塊$を確立させる。
◎
Establish abspos containing block
*/
}

.abspos {
  grid-row-start: 1;     /* 
始端になる~row罫は 1 本目 — すなわち，格子~容器の上端
◎
1st grid row line = top of grid container
*/
  grid-row-end: span 2;  /* 
終端になる~row罫は 3 本目
◎
3rd grid row line
*/
  grid-column-start: 3;  /* 
始端になる~col罫は 3 本目
◎
3rd grid col line
*/
  grid-column-end: auto; /* 
~colは右~padding辺で終端する
◎
right padding edge
*/
  /* 
`包含塊$は、
`格子~容器$の右上部分を覆う
◎
Containing block covers the top right quadrant of the grid container
*/

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

`格子~配置~prop$に対する `~autoP$v 値は、 自動-配置に代わって，`配置$に特別な罫を供与する — `格子~容器$の対応する~padding辺 （`格子~容器$が~overflowする場合は、 ~scroll可能な区画の~padding辺） に位置するような。 これらの罫は、 `絶対的に位置され$た駒の位置決めに利用され，この `増補~格子@ の最初の（ 0 番の）罫, 最後の（ −0 番の）罫になる。 ◎ Instead of auto-placement, an auto value for a grid-placement property contributes a special line to the placement whose position is that of the corresponding padding edge of the grid container (the padding edge of the scrollable area, if the grid container overflows). These lines become the first and last lines (0th and -0th) of the augmented grid used for positioning absolutely-positioned items.

注記： したがって既定では、 `絶対的に位置され$た~boxの`包含塊$は、 `塊~容器$に対するときと同じく，`格子~容器$の各~padding辺に対応する。 ◎ Note: Thus, by default, the absolutely-positioned box’s containing block will correspond to the padding edges of the grid container, as it does for block containers.

`絶対~位置決め$は、 `格子$とその`~flow内$にある内容の~layout後に生じるので、 格子~筋の~sizingに何も供与せず，格子の［ ~size／~~構成 ］に影響することもない。 `格子~配置~prop$が，存在しない罫を指している場合 — 明示的に そのような罫を指定しているか, 既存の`暗黙的な罫$の外側まで~spanしている場合 — 代わりに `~autoP$v【！auto】 を指定しているものと扱われる （新たな`暗黙的な罫$は作成されない）。 ◎ Absolute positioning occurs after layout of the grid and its in-flow contents, and does not contribute to the sizing of any grid tracks or affect the size/configuration of the grid in any way. If a grid-placement property refers to a non-existent line either by explicitly specifying such a line or by spanning outside of the existing implicit grid, it is instead treated as specifying auto (instead of creating new implicit grid lines).

注記： `暗黙的な罫$は、 【その生成-時に付与される】すべての`罫~名$を持つものと見做されることに注意。 なので，参照された罫は、 明示的に命名されていない罫であっても，存在するかもしれない。 ◎ Note: Remember that implicit lines are assumed to have all line names, so a referenced line might exist even though it is not explicitly named.

`配置$が`~span数$のみを包含する場合、 それを［ その軸における 2 個の `~autoP$v 罫 ］に置換する。 （これは、 次のいずれにおいても起こる： ある軸の`格子~配置~prop$が 元々の~spanを供与したとき, あるいは `§ 格子~配置における競合の取扱い＠#grid-placement-errors$により， 2 個目の~spanが無視されるとき。） ◎ If the placement only contains a grid span, replace it with the two auto lines in that axis. (This happens when both grid-placement properties in an axis contributed a span originally, and § 8.3.1 Grid Placement Conflict Handling caused the second span to be ignored.)

10.2. 親が格子~容器であるとき

`格子~容器$の子のうち，`絶対的に位置され$たものは、 ~flow外であり，`格子~駒$ではないので、 格子の他の駒の配置や~sizingには影響しない。 ◎ An absolutely-positioned child of a grid container is out-of-flow and not a grid item, and so does not affect the placement of other items or the sizing of the grid.

`格子~容器$の子が`絶対的に位置され$ている場合、 その`静的~位置$は，［ それが`区画$の中で 唯一の格子~駒である, かつ その各~辺が格子~容器の内容~辺に~~一致している ］かのように決定される。 ◎ The static position [CSS2] of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the content edges of the grid container.

注記： この位置は、 子の`自己-整列~prop$の値に影響されることに注意。 他のほとんどの~layout~modelと同様、 `絶対的に位置され$た子は， 包含塊の~sizeや内容の~layoutには効果は無い。 ◎ Note: Note that this position is affected by the values of justify-self and align-self on the child, and that, as in most other layout models, the absolutely-positioned child has no effect on the size of the containing block or layout of its contents.

11.1. 側溝： `column-gap^p, `row-gap^p, `gap^p ~prop

`格子~容器$に［ `row-gap$p ／ `column-gap$p ］~prop（あるいは，対応する `gap$p 略式~prop）が指定された場合、 各［ `格子~row$ ／ `格子~col$ ］間の`側溝$を定義する。 それらの構文は、 `CSS-ALIGN-3$r `§ ~box間の~gap＠~CSSALIGN#gaps$ にて定義される。 ◎ The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns. Their syntax is defined in CSS Box Alignment 3 § 8 Gaps Between Boxes.

これらの~propの効果は、 影響される`罫$が太さを獲得するかのようになる： `筋$を挟む 2 本の`罫$を表現する`側溝$の合間が，その`筋$の空間になる。 `§ 筋の~sizing＠#algo-track-sizing$ の目的においては、 各`側溝$は，指定d~sizeによる［ 余分な, 空な, 固定d~sizeな ］筋として扱われ、 対応する`罫$をまたがって~spanする格子~駒は，側溝にも~spanする。 ◎ The effect of these properties is as though the affected grid lines acquired thickness: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is treated as an extra, empty, fixed-size track of the specified size, which is spanned by any grid items that span across its corresponding grid line.

注記： `内容-分布~prop$に因り、 各~筋の合間には，空間が追加され得る。 `格子~sizing~algo$を見よ。 この空間は、 実質的に`側溝$の~size（太さ）を増やす。 ◎ Note: Additional spacing may be added between tracks due to justify-content/align-content. See § 12.1 Grid Sizing Algorithm. This space effectively increases the size of the gutters.

`格子$が筋~間で`断片化-$されている場合、 そのような筋~間における`側溝$によるアキは， 抑止するモノトスル。 注記： ~marginと違って、 側溝は，強制d分断~後でも抑止される。 ◎ If a grid is fragmented between tracks, the gutter spacing between those tracks must be suppressed. Note that gutters are suppressed even after forced breaks, unlike margins.

`側溝$が現れるのは，`暗黙的な格子$を成す筋たちの合間に限られ、［ 最初の筋より前／最後の筋より後 ］には側溝はない （特に，［ `暗黙的な格子$を成す［ 最初／最後 ］の筋 ］と［ `増補~格子$を成す［ 最初／最後 ］の “自動” 罫 ］との合間には、 側溝はない） ◎ Gutters only appear between tracks of the implicit grid; there is no gutter before the first track or after the last track. (In particular, there is no gutter between the first/last track of the implicit grid and the “auto” lines in the augmented grid.)

筋が`畳まれ$る結果，その両~側の側溝が `畳まれ@gut る場合、 両 側溝は，［ 互いの始端~辺, 互いの終端~辺 ］が正確に一致するように重合する。 `畳まれ$た筋の一方の側に側溝がない場合 （例： `暗黙的な格子$の［ 最初／最後 ］の筋）、 `畳まれ$た筋のどちら “側” の側溝もなくなる。 ◎ When a collapsed track’s gutters collapse, they coincide exactly—the two gutters overlap so that their start and end edges coincide. If one side of a collapsed track does not have a gutter (e.g. if it is the first or last track of the implicit grid), then collapsing its gutters results in no gutter on either “side” of the collapsed track.

11.2. `auto^v ~marginによる整列-法

`格子~駒$に対する自動`~margin$（ `auto^v ~margin ）の効果は、 `塊~layout$における自動~marginによる効果によく似る： ◎ Auto margins on grid items have an effect very similar to auto margins in block layout:

• `筋$~sizeを計算する目的においては、 `auto^v ~marginは `0^v として扱われる。 ◎ During calculations of grid track sizes, auto margins are treated as 0.
• `塊~layout$の`行内-軸$用に定義されるとおり （ `CSS2$r `§ 通常~flow内にある塊~levelの置換されない要素＠~CSS2J#blockwidth$を見よ）、 `auto^v ~marginは — どちらの軸においても，整列に先立って，`~box整列~prop$を介して — 正な~free空間を吸収する — それにより，当の軸における`自己-整列~prop$の効果を不能化する。 ◎ As defined for the inline axis of block layout (see CSS2§10.3.3), auto margins in either axis absorb positive free space prior to alignment via the box alignment properties, thereby disabling the effects of any self-alignment properties in that axis.
• ~overflowしている`格子~駒$の `auto^v ~marginは 0 に解決され、 各種`~box整列~prop$に指定されるように~overflowする。 ◎ Overflowing grid items resolve their auto margins to zero and overflow as specified by their box alignment properties.

11.3. 行内-軸~方向の整列： `justify-self^p, `justify-items^p ~prop

`格子~駒$は、［ `CSS-ALIGN-3$r にて定義される `格子~駒$の `justify-self$p ~prop ］や［ `格子~容器$の `justify-items$p ~prop ］を利用して，行内~次元に整列できる。 ◎ Grid items can be aligned in the inline dimension by using the justify-self property on the grid item or justify-items property on the grid container, as defined in [CSS-ALIGN-3].

`格子~駒$ %駒 の~sizeが，内在的に~sizeされた`筋$†の~sizeに依存していて、 その軸において %駒 に`基底線~整列$ %整列 が指定されている場合†† （したがって，筋の~sizeは、 %駒 の~sizeと %整列 の両者に依存する結果，循環依存が生じる）、 %駒 は %整列 には関与せず，代わりに %整列 の`~fallback整列$が — 元々指定されていたかのように — 利用されるとする。 この目的においては、 `格子~容器$の~sizeが関連な軸において`不定$であるときは， `flex$t 筋~sizeは “内在的に~sizeされた” ものと数えられる。 【† この場合は~col筋 — 同じ~col筋を共有する駒たちの基底線が整列される。】 【†† すなわち、これらの~propに `baseline^v ~keywordが指定されている場合。】 ◎ If baseline alignment is specified on a grid item whose size in that axis depends on the size of an intrinsically-sized track (whose size is therefore dependent on both the item’s size and baseline alignment, creating a cyclic dependency), that item does not participate in baseline alignment, and instead uses its fallback alignment as if that were originally specified. For this purpose, <flex> track sizes count as “intrinsically-sized” when the grid container has an indefinite size in the relevant axis.

注記： ~fallback整列が利用されるかどうかは、 ~layout全体にわたり変化しない — 循環は、 存在するならば存在し続ける。 ◎ Note: Whether the fallback alignment is used or not does not change over the course of layout: if a cycle exists, it exists.

11.4. 塊-軸~方向の整列： `align-self^p, `align-items^p ~prop

`格子~駒$は、［ `CSS-ALIGN-3$r に定義される `格子~駒$の `align-self$p ~prop ］や［ `格子~容器$の `align-items$p ~prop ］を利用して，（行内~次元に垂直な）塊~次元にも整列できる。 ◎ Grid items can also be aligned in the block dimension (perpendicular to the inline dimension) by using the align-self property on the grid item or align-items property on the grid container, as defined in [CSS-ALIGN-3].

`前~節に述べた~fallback整列＠#_baseline-and-dependency$に関する要件は、 これらの~propにも — ~row筋を~col筋に置き換えて — 適用される。 ◎ If baseline alignment is specified on a grid item whose size in that axis depends on the size of an intrinsically-sized track (whose size is therefore dependent on both the item’s size and baseline alignment, creating a cyclic dependency), that item does not participate in baseline alignment, and instead uses its fallback alignment as if that were originally specified. For this purpose, <flex> track sizes count as “intrinsically-sized” when the grid container has an indefinite size in the relevant axis.

11.5. 格子の整列-法： `justify-content^p, `align-content^p ~prop

`格子$の外縁~辺が`格子~容器$ %容器 の内容~辺に対応しない場合 （例えば，~flexに~sizeされる~colが無いとき）、 %容器 内の`筋$たちは， %容器 の`内容-分布~prop$に則って %容器 の`内容~box$内で整列される。 ◎ If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

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

格子に`筋$が 1 本もない場合 （`明示的な格子$は空であり，`暗黙的な格子$により作成される筋もない）、 各~軸における唯一の`罫$は，`格子~容器$の始端~辺に整列される。 ◎ If there are no grid tracks (the explicit grid is empty, and no tracks were created in the implicit grid), the sole grid line in each axis is aligned with the start edge of the grid container.

`内容-分布~prop$がとる一部の値は、 筋~間を互いに離したり （ `space-around$v, `space-between$v, `space-evenly$v ）， 筋を~sizeし直す（ `~stretchAC$v ）ことに注意。 `格子$が筋~間で`断片化-$されている場合、 筋~間におけるそのような追加的なアキは，抑止するモノトスル。 ◎ Note that certain values of justify-content and align-content can cause the tracks to be spaced apart (space-around, space-between, space-evenly) or to be resized (stretch). If the grid is fragmented between tracks, any such additional spacing between those tracks must be suppressed.

.wrapper {
  display: grid;
  /* 
4 本の~col, 3 本の~rowからなる格子~容器
◎
3-row / 4-column grid container
 */
  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 個の升に自動-配置される
◎
last two items auto-place into the last two grid cells
 */

11.6. 格子~容器の基底線

`格子~容器$ %容器 の【~row（行内-軸）沿いの】［ 最初／最後 ］の`基底線$は、 次に従って決定される — %容器 の［ `最初の基底線~集合$／`最後の基底線~集合$ ］【！`基底線~集合$】は、 結果の基底線から`生成される$ことになる （以下における各 ［ “最初…” ／ “最後…” ］は、 同順とする）： ◎ The first (last) baselines of a grid container are determined as follows:

1. ~IF［ %容器 内に 1 個以上の`格子~駒$が在る ］：

   1. %~row ~LET %容器 を成す［ 1 個以上の`格子~駒$が交差している~row ］のうち［ 最初／最後 ］のもの ⇒ ◎ Find the first (last) row of the grid container containing at least one grid item.
   2. ~IF［ %~row に交差している`格子~駒$のうち［ %~row における［ `最初の基底線による整列$／`最後の基底線による整列$【！`基底線~整列$】 ］に関与するもの ］は在る ］ ⇒＃ ~RET 該当する駒たちが共有する`整列~基底線$ ◎ If any of the grid items intersecting this row participate in baseline alignment in that row, the grid container’s baseline set is generated from the shared alignment baseline of those grid items.
   3. %駒 ~LET %容器 内の［ 最初／最後 ］の駒 — ~row主導による`格子~順序$で（ %容器 の`書字~mode$に則って） ◎ ↓
   4. ~IF［ %容器【！格子】 の行内-軸において， %駒 は`整列~基底線$を持つ ］ ⇒ ~RET その基底線 ◎ Otherwise, the grid container’s first (last) baseline set is generated from the alignment baseline of the first (last) grid item in row-major grid order (according to the writing mode of the grid container).＼
   5. ~ELSE ⇒ ~RET %駒 の`~border~box$から`合成-$される基底線 ◎ If the grid item has no alignment baseline in the grid’s inline axis, then one is first synthesized from its border edges.
2. ~ELSE （ %容器 内に`格子~駒$は無く、 %容器 は`基底線~集合$を持たない） ⇒ ~RET %容器 が属する`整列~文脈$の規則に則って`合成-$される基底線 ◎ If the grid container does not contain any grid items, the grid container has no first (last) baseline set, and one is synthesized if needed according to the rules of its alignment context. Exit from this algorithm.

`格子~順序@ — “格子により改変された文書~順序” — とは、 格子の各`升$を辿るときに，`格子~駒$に遭遇する順序である。 複数の駒に同時に遭遇する【同じ升に重合している】場合は， `order$p により`改変された文書~順序$に従う。 ◎ Grid-modified document order (grid order) is the order in which grid items are encountered when traversing the grid’s grid cells. If two items are encountered at the same time, they are taken in order-modified document order.

上の規則に則って基底線を計算する際に， 基底線を供与している~boxの `overflow$p が~scrollを許容する値をとる場合、 その~boxは，［ 基底線を決定する目的においては，その初期~scroll位置に在る ］と扱うモノトスル。 ◎ When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.

`table-cell^v の`基底線を決定する＠~CSS2TABLE#height-layout$ときには、 `行l~box$や `table-row^v のときと同じく， 格子~容器が基底線を供する。 `CSS2$r ◎ When determining the baseline of a table cell, a grid container provides a baseline just as a line box or table-row does. [CSS2]

基底線についての詳細は、 CSS Writing Modes 3 の `§ 基底線 — 序論＠~CSSWM#intro-baselines$, および CSS Alignment の `§ 基底線~整列の詳細＠~CSSALIGN#baseline-rules$ を見よ。 ◎ See CSS Writing Modes 3 § 4.1 Introduction to Baselines and CSS Box Alignment 3 § 9 Baseline Alignment Details for more information on baselines.

12.1. 格子~sizing~algo

この節では、 `格子~sizing~algo^bを定義する — それは、 すべての`筋$の~sizeを決定して， それに伴い格子~全体の~sizeを決定する。 ◎ This section defines the grid sizing algorithm, which determines the size of all grid tracks and, by extension, the entire grid.

各~筋には， `~min筋~sizing関数$, `~max筋~sizing関数$ （同じにもなり得る）が指定されている。 それぞれ，次のいずれかに~~分類される： ◎ Each track has specified minimum and maximum sizing functions (which may be the same). Each sizing function is either:

• `固定的~sizing関数@ — 次のいずれか ⇒＃ `length$t ／ 解決-可能な `percentage$t ◎ A fixed sizing function (<length> or resolvable <percentage>).
• `内在的~sizing関数@ — 次のいずれか ⇒＃ `min-content$vt ／ `max-content$vt ／ `auto$vt ／ `fit-content$f ◎ An intrinsic sizing function (min-content, max-content, auto, fit-content()).
• `~flex可能な~sizing関数@ ⇒ `flex$t ◎ A flexible sizing function (<flex>).

`格子~sizing~algo$は、［ これらの~sizingによる拘束 ］を［ 筋の使用~size ］に解決する方法を定義する。 ◎ The grid sizing algorithm defines how to resolve these sizing constraints into used track sizes.

1. `筋~sizing~algo$により，一連の`格子~col$の~sizeを解決する — この処理nにおいては： ◎ First, the track sizing algorithm is used to resolve the sizes of the grid columns.

   • `格子~駒$ %駒 のうち，`格子~容器$ %容器 の`下位格子$を成すものに対しては： ◎ ↓

     • %駒 は %容器 の`行内-軸$において`下位格子~化$されている場合 ⇒ %駒 を空として扱うとともに、 %駒 の`格子~駒$（ %容器 の子の子）は %容器 の直な子として扱う。 この掘下げは再帰的になる。 ◎ In this process, any grid item which is subgridded in the grid container’s inline axis is treated as empty and its grid items (the grandchildren) are treated as direct children of the grid container (their grandparent). This introspection is recursive.

     • 他の場合（ %駒 は %容器 の`塊-軸$に限り`下位格子~化$されている場合） ⇒ `格子~容器$としての %駒 — 以下 %下位格子 — の［ %容器 の`行内-軸$ ］における~sizeが %駒 の内容の~sizeに依存する場合もまた、 掘下げられる ⇒ この次元における %駒 の~sizeは，［ 他方の次元における， %下位格子 の`下位格子~化$された筋 ］の~sizingに依存し得るので、［ %駒 が %容器 の~col~sizingに供与する~size ］は （ `§ 内在的な筋~sizeを解決する＠#algo-content$を見よ）、 ［［ `格子~sizing~algo$を【 %下位格子 に対し適用するとき，】 これ【 %容器 】自身と同じ地点 ］までに限り，それ【 %下位格子 】の筋~sizingは決定-済みである ］とする下で得られるとする。 例： 1 周回~目に，この最初の段を経るときには， %下位格子 の各~筋は、 この段のみを通して~sizeされることになり、 2 周回~目にこの段が誘発された場合、 %下位格子 は — %格子 の~col~sizingを考慮するためにそれ【 %駒 】の~sizeを返すに先立って — 1 周回~目における段 1 〜 3, および 2 周回~目における この段を完了したことになる。 この掘下げもまた，再帰的になる。 ◎ Items which are subgridded only in the block axis, and whose grid container size in the inline axis depends on the size of its contents are also introspected:＼ since the size of the item in this dimension can be dependent on the sizing of its subgridded tracks in the other, the size contribution of any such item to this grid’s column sizing (see Resolve Intrinsic Track Sizes) is taken under the provision of having determined its track sizing only up to the same point in the Grid Sizing Algorithm as this itself.＼ E.g. for the first pass through this step, the item will have its tracks sized only through this first step; if a second pass of this step is triggered then the item will have completed a first pass through steps 1-3 as well as the second pass of this step prior to returning its size for consideration in this grid’s column sizing. Again, this introspection is recursive.

       【 原文の~~行間情報が多いので、 この段落の和訳は，おそらく この仕様が意図する~modelを正しく反映し切れていない。 】

   • `格子~駒$の~layoutの計算が `塊-軸$において`可用な空間$に依存する場合、 `可用な空間$は，［ 各~rowの~sizeが次に与える~sizeであった ］とするときのそれと見做す ⇒＃ `確定的$な`~max筋~sizing関数$を伴う~rowは その~size ／ 他のすべての~rowは 無限大 ◎ If calculating the layout of a grid item in this step depends on the available space in the block axis, assume the available space that it would have if any row with a definite max track sizing function had that size and all other rows were infinite.＼
   • `格子~容器$も, それを成すどの~rowの~sizeも`確定的$である場合、 `align-content$p も適用して，そのような駒が~spanする各~row~gapの最終的な実効~sizeを見出す。 他の場合、 この見積もりにおいては，筋~整列による効果を無視する。 【！↓ track = row 】 ◎ If both the grid container and all tracks have definite sizes, also apply align-content to find the final effective size of any gaps spanned by such items; otherwise ignore the effects of track alignment in this estimation.

2. `筋~sizing~algo$により，一連の`格子~row$の~sizeを解決する — この処理nにおいては： ◎ Next, the track sizing algorithm resolves the sizes of the grid rows.

   • `格子~駒$ %駒 のうち，`格子~容器$ %容器 の`下位格子$を成すものに対しては： ◎ ↓

     • %駒 は %容器 の`塊-軸$において`下位格子~化$されている場合 ⇒ %駒 を空として扱うことに加え、 %駒 の`格子~駒$（ %容器 の子の子）は， %容器 の直な子として扱う。 この掘下げは再帰的である。 ◎ In this process, any grid item which is subgridded in the grid container’s block axis is treated as empty and its grid items (the grandchildren) are treated as direct children of the grid container (their grandparent). This introspection is recursive.
     • 他の場合 （ %駒 は %容器 の`行内-軸$に限り`下位格子~化$されている場合） ⇒ %容器 の`塊-軸$における［ %駒 の~size ］のうち［ %駒 の内容の~size ］に依存するものも掘下げられる。 （~col~sizingのときと同じく、 %駒 が，この格子の~row~sizingに供与する~sizeは、［ `格子~sizing~algo$【！the algorithm】における この対応している地点までに限られ， それの筋~sizingは決定-済みである ］とする下で得られるとする — この掘下げもまた、再帰的である。） ◎ As with sizing columns, items which are subgridded only in the inline axis, and whose grid container size in the block axis depends on the size of its contents are also introspected. (As with sizing columns, the size contribution to this grid’s row sizing is taken under the provision of having determined its track sizing only up to this corresponding point in the algorithm; and again, this introspection is recursive.)
   • 駒の`塊-軸$~size供与を得るために`行内-軸$に`可用な空間$が要求される所では、 前~段にて計算した`格子~col$の~sizeを利用して，それを見出す。 ◎ To find the inline-axis available space for any items whose block-axis size contributions require it, use the grid column sizes calculated in the previous step.＼
   • `格子~容器$の`行内~size$は`確定的$である場合、 ~col~gapの実効~sizeも織り込むため `justify-content$p も適用する。 ◎ If the grid container’s inline size is definite, also apply justify-content to account for the effective column gap sizes.

3. ある格子~駒の`最小-内容~供与$が，前~段にて計算した~row~sizeと整列に基づいて変化した場合 ⇒ 新たな［ `最小-内容~供与$, `最大-内容~供与$ ］の下で，`格子~col$の~sizeを解決し直す（一度限り） — 次に従う下で： ◎ Then, if the min-content contribution of any grid item has changed based on the row sizes and alignment calculated in step 2, re-resolve the sizes of the grid columns with the new min-content and max-content contributions (once only).

   • 駒の`行内-軸$~size供与を得るために`塊-軸$に`可用な空間$が要求される所では、 前~段にて計算した`格子~row$の~sizeを利用して，それを見出す。 ◎ To find the block-axis available space for any items whose inline-axis size contributions require it, use the grid row sizes calculated in the previous step.＼
   • `格子~容器$の`塊~size$は`確定的$である場合、 ~row~gapの実効~sizeも織り込むため `align-content$p も適用する。 ◎ If the grid container’s block size is definite, also apply align-content to account for the effective row gap sizes.

   注記： この繰返nは、 `格子~駒$の`行内~size$が，それが占める`区画$の`塊~size$に依存するとき必要yである。 例えば、 次に挙げるとき：

   • 折返される~col`~flex容器$ （ `flex-flow$p: `column wrap^v; ）
   • `直交~flow$（ `writing-mode$p ）
   • `複-柱~容器$
   • 縦横比【！aspect-ratio】を伴う（または，子に縦横比を伴うものがある）駒のうち，その~sizeは~rowの~sizeに依存するもの

   ◎ This repetition is necessary for cases where the inline size of a grid item depends on the block size of its grid area. Examples include wrapped column flex containers (flex-flow: column wrap), orthogonal flows (writing-mode), multi-column containers, and items with an aspect-ratio (or with a child with an aspect ratio) whose size depends on the size of the row.

4. ある`格子~駒$の`最小-内容~供与$が，前~段にて計算した［ 一連の~col~sizeと整列 ］に基づいて変化した場合 ⇒ 新たな［ `最小-内容~供与$, `最大-内容~供与$ ］の下で，一連の`格子~row$の~sizeを解決し直す（一度限り） — 次に従う下で： ◎ Next, if the min-content contribution of any grid item has changed based on the column sizes and alignment calculated in step 3, re-resolve the sizes of the grid rows with the new min-content and max-content contributions (once only).

   • 駒の`塊-軸$~size供与を得るために`行内-軸$に`可用な空間$が要求される所では、 前~段にて計算した`格子~col$の~sizeを利用して，それを見出す。 ◎ To find the inline-axis available space for any items whose block-axis size contributions require it, use the grid column sizes calculated in the previous step.＼
   • `格子~容器$の`行内~size$は`確定的$である場合、 ~col~gapの実効~sizeも織り込むため `justify-content$p も適用する。 ◎ If the grid container’s inline size is definite, also apply justify-content to account for the effective column gap sizes.

5. `格子~容器$の中の筋たちを`内容-分布~prop$に則って整列する。 ◎ Finally, align the tracks within the grid container according to the align-content and justify-content properties.

   注記： これは，筋と筋の合間に余分な空間を導入し得るので、 その~gapに~spanしている駒の区画は，［ 筋を~sizeしている間に 割り当てられた空間 ］を超えて~~拡げられ得る。 ◎ Note: This can introduce extra space between tracks, potentially enlarging the grid area of any grid items spanning the gaps beyond the space allotted to during track sizing.

注記： `下位格子~化$された各~筋の~sizingは、 そのような筋を占める各~駒を，`親~格子$の駒として扱う。 この織り交ぜ法は、 格子~sizingは — 再帰するに伴い，両~軸とも完了するのではなく — 軸ごとに`下位格子$の中へ掘り下げることを要求する。 このことは、 次を意味することに注意 ⇒ `下位格子$が`直交~flowを確立して$いる場合、 下位格子の筋たちを~sizeする順序は`入子な格子$とは逆になる。 【下位格子の［~row, ~col］を~sizeする順序は，親~格子とは逆になる？】 ◎ Note: Track sizing in a subgridded dimension treats each item in a given track in that axis as members of the parent grid. This interlacing requires that grid sizing drill down per axis into subgrids, rather than completing both axes as it recurses. Note this means that a subgrid establishing an orthogonal flow would have the order of its track sizing inverted compared to a nested grid.

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

12.2. 筋~sizingの用語

`~min筋~sizing関数@ ◎ min track sizing function

当の筋を~sizeしている`筋~sizing関数$に応じて：

• `minmax$f 関数ならば、 その関数の 1 個目の引数になる。
• `flex$t 値ならば、 `auto$vt になる。
• `fit-content$f 関数ならば、 `auto$vt になる。
• 他の場合、 その`筋~sizing関数$になる。

◎ If the track was sized with a minmax() function, this is the first argument to that function. If the track was sized with a <flex> value or fit-content() function, auto. Otherwise, the track’s sizing function.

`~max筋~sizing関数@ ◎ max track sizing function

当の筋を~sizeしている`筋~sizing関数$に応じて：

• `minmax$f 関数ならば、 その関数の 2 個目の引数になる。
• 他の場合、 その`筋~sizing関数$。

とした上で、［ `auto$vt ／ `fit-content$f ］は `max-content$vt として扱う — ただし， `fit-content$f に対し他が指定されている所は除く。

◎ If the track was sized with a minmax() function, this is the second argument to that function. Otherwise, the track’s sizing function. In all cases, treat auto and fit-content() as max-content, except where specified otherwise for fit-content().

`可用な格子~空間@ ◎ available grid space

各~次元ごとに次で与えられる： ◎ Independently in each dimension, the available grid space is:

• `格子~容器$の~sizeが確定的な場合 ⇒ その`内容~box$の~sizeを利用する。 ◎ If the grid container’s size is definite, then use the size of its content box.
• `格子~容器$が［ `最小-内容~拘束$ ／ `最大-内容~拘束$ ］の下で~sizeされている場合 ⇒ `可用な格子~空間$はその拘束になる（不定になる）。 ◎ If the grid container is being sized under a min-content constraint or max-content constraint then the available grid space is that constraint (and is indefinite).

注記： 内容に基づく~sizingを指示する `auto$vt ~size （例：横組みにおける`塊~levelの~box$の縦幅）は、 `max-content$vt と等価になる。 ◎ Note: auto sizes that indicate content-based sizing (e.g. the height of a block-level box in horizontal writing modes) are equivalent to max-content.

すべての事例において、 `可用な格子~空間$は，`格子~容器$の［［ `min-width^p ／ `max-width^p ］~prop／［ `min-height^p ／ `max-height^p ］~prop ］の値が確定的ならば、 それらに則って切詰めるとする。 ◎ In all cases, clamp the available grid space according to the grid container’s min/max-width/height properties, if they are definite.

`~free空間@ ◎ free space

• `可用な空間$が`不定$な場合は`不定$。
• 他の場合、 `max^op( ( `可用な格子~空間$ − ( すべての筋（側溝も含む）の`基底~size$の総和 ) ), 0 )

◎ Equal to the available grid space minus the sum of the base sizes of all the grid tracks (including gutters), floored at zero. If available grid space is indefinite, the free space is indefinite as well.

`~span数@1 ◎ span count

`格子~駒$に交叉する`筋$の本数 — 筋は、 文脈にて適用-可能な次元のそれとする。 ◎ The number of grid tracks crossed by a grid item in the applicable dimension.

注記： `格子~sizing~algo$の目的においては、 `側溝$は，固定d~sizeな筋 — ［ ~min, ~max ］~sizing関数とも側溝の使用~sizeに設定された筋 — として扱われるので、［ `筋~sizing~algo$の計算には，側溝の~sizeも組入れられる必要がある ］ことに注意。 ◎ Note: Remember that gutters are treated as fixed-size tracks—tracks with their min and max sizing functions both set to the gutter’s used size—for the purpose of the grid sizing algorithm. Their widths need to be incorporated into the track sizing algorithm’s calculations accordingly.

12.3. 筋~sizing~algo

5 段からなる手続きがある：

1. `筋~sizeの初期化＠#algo-init$ ◎ Initialize Track Sizes
2. `内在的な筋~sizeを解決する＠#algo-content$ ◎ Resolve Intrinsic Track Sizes
3. `筋を最大~化する＠#algo-grow-tracks$ ◎ Maximize Tracks
4. `~flex可能な筋を拡げる＠#algo-flex-tracks$ ◎ Expand Flexible Tracks
5. `auto^v 筋を伸張する ◎ Expand Stretched auto Tracks

12.4. 筋~sizeの初期化

~EACH( `筋$ %筋 ) に対し， %筋 の［ `基底~size$, `拡幅~上限$ ］を初期化する： ◎ Initialize each track’s base size and growth limit.＼

1. %筋 の`基底~size$ ~SET %筋 の`~min筋~sizing関数$に応じて ⇒＃ `固定的~sizing関数$であるならば，絶対~長さに解決した結果† ／ `内在的~sizing関数$であるばらば， 0

   注記†： 長さは`不定$にはなり得ない — その場合、 `auto$vt 【すなわち，内在的~sizing関数】に扱われるので。

   ◎ For each track, if the track’s min track sizing function is: • A fixed sizing function •• Resolve to an absolute length and use that size as the track’s initial base size. •• Note: Indefinite lengths cannot occur, as they’re treated as auto. • An intrinsic sizing function •• Use an initial base size of zero.
2. %筋 の`拡幅~上限$ ~SET %筋 の`~max筋~sizing関数$に応じて ⇒＃ `固定的~sizing関数$であるならば，絶対~長さに解決した結果 ／ `内在的~sizing関数$であるならば，無限大／ `~flex可能な~sizing関数$であるならば，無限大 ◎ For each track, if the track’s max track sizing function is: • A fixed sizing function •• Resolve to an absolute length and use that size as the track’s initial growth limit. • An intrinsic sizing function • A flexible sizing function •• Use an initial growth limit of infinity.
3. ~IF［ %筋 の`拡幅~上限$ ~LT %筋 の`基底~size$ ］ ⇒ %筋 の`拡幅~上限$ ~SET %筋 の`基底~size$ ◎ In all cases, if the growth limit is less than the base size, increase the growth limit to match the base size.

注記： `側溝$は、 `筋~sizing~algo$の目的においては，空な固定d~sizeの筋として扱われる。 ◎ Note: Gutters are treated as empty fixed-size tracks for the purpose of the track sizing algorithm.

12.5. 内在的な筋~sizeを解決する

この段では、 `内在的~sizing関数$を絶対~長さに解決する。 それはまず、 全体が単独の筋に包含されている駒に基づいて，それらの~sizeを解決する。 次に、 筋の本数を徐々に増やしながら， 複数本の筋に~spanする駒に要する空間を加えていく — それらの筋にまたがる余った空間を，アリな限り均等に分配しつつ。 ◎ This step resolves intrinsic track sizing functions to absolute lengths. First it resolves those sizes based on items that are contained wholly within a single track. Then it gradually adds in the space requirements of items that span multiple tracks, evenly distributing the extra space across those tracks insofar as possible.

注記： この節の手続きが完了したとき、 すべての［ 内在的な`基底~size$, `拡幅~上限$ ］は、 絶対~長さに解決されることになる。 ◎ Note: When this step is complete, all intrinsic base sizes and growth limits will have been resolved to absolute lengths.

注記： `~max筋~sizing関数$［ `fit-content$f ／ `auto$vt ］は、 明示的に他が指定されない限り， `max-content$vt と`同じに扱われる＠#algo-terms$ことに注意。 ◎ Note: Remember that fit-content() and auto max track sizing functions are treated the same as max-content except where explicitly specified otherwise.

1. （各~駒の`内在的~size供与$が 駒の基底線~整列を反映するように、 基底線が整列される各~駒に詰物を付与する） ◎ Shim baseline-aligned items so their intrinsic size contributions reflect their baseline alignment.＼

   各 `基底線-共有~group$に対し，それを成す駒たちに対し、 その［ 始端／終端 ］側に “詰物” （実質的に，追加的な~margin）を（［ 最初の／最後の ］基底線~整列~用に）追加して、 それらが［ 始端／終端 ］に一緒に整列されるとき，各自の基底線が `指定された値＠~CSSALIGN#baseline-values$に整列するようにする。 【`基底線~整列により拡幅される様子を示す参考図＠~CSSWG/css-flexbox-1/images/flex-align.svg$（これは~flex~layoutの例だが）】 ◎ For the items in each baseline-sharing group, add a “shim” (effectively, additional margin) on the start/end side (for first/last-baseline alignment) of each item so that, when start/end-aligned together their baselines align as specified.

   下に与える筋~sizingの目的においては、 これらの “詰物” は，駒の`内在的~size供与$の一部を成すと見なされる。 ある駒が複数の`内在的~size供与$を利用する場合、 各自の詰物は互いに異なり得る。 ◎ Consider these “shims” as part of the items’ intrinsic size contribution for the purpose of track sizing, below. If an item uses multiple intrinsic size contributions, it can have different shims for each one.

   例えば，`格子~容器$の~sizeが`不定$なときは、 先ず［ `最小-内容~拘束$／`最大-内容~拘束$ ］の下で~lay-outして，~sizeを見出してから，その~sizeで “~~本番” 用に~lay-outされる （それは、 百分率~sizeの筋の様なものに影響し得る）。 各~~段階で追加される “詰物” は互いに独立であり、 それぞれの~~段階における~layoutのみに影響する。 ◎ For example, when the grid container has an indefinite size, it is first laid out under min/max-content constraints to find the size, then laid out "for real" with that size (which can affect things like percentage tracks). The "shims" added for each phase are independent, and only affect the layout during that phase.

   注記： この段では、 基底線により［ `自己-整列される駒＠~CSSALIGN#baseline-align-self$, `内容~整列される駒＠~CSSALIGN#baseline-align-content$ ］どちらも考慮される。 `CSS-ALIGN-3$r ◎ Note: Note that both baseline self-aligned and baseline content-aligned items are considered in this step.

   注記： 自前の~sizeが［ 内在的に~sizeされる筋の~size ］に依存する格子~駒には、 詰物は付与されない — それらは、 `基底線~整列に関与しない＠#row-align$ので。 ◎ Note: Since grid items whose own size depends on the size of an intrinsically-sized track do not participate in baseline alignment, they are not shimmed.

2. （各~筋を［ ~span数が 1 である，すべての駒 ］が収まるように~sizeする）

   ~EACH( %筋 ) に対し：

   ◎ Size tracks to fit non-spanning items: For each track with an intrinsic track sizing function and not a flexible sizing function, consider the items in it with a span of 1:
   1. ~IF［ %筋 は`~flex可能な~sizing関数$を伴う ］ ⇒ ~CONTINUE ◎ ↑
   2. %S ~LET ~spanする筋は %筋 のみである駒たちが成す集合 ◎ ↑
   3. ~IF［ %S は空である ］ ⇒ ~CONTINUE ◎ ↑

   4. ~IF［ %筋 の`~min筋~sizing関数$は`内在的~sizing関数$である ］ ⇒ %筋 の`基底~size$ ~SET %筋 の`~min筋~sizing関数$に応じて 次で与えられる値： ◎ ↓

      `min-content$vt ◎ For min-content minimums: If the track has a min-content min track sizing function,＼

      `max^op( `max^op( %駒 の`最小-内容~供与$ ； %駒 ~IN %S ), 0 ) ◎ set its base size to the maximum of the items’ min-content contributions, floored at zero.

      `max-content$vt ◎ For max-content minimums: If the track has a max-content min track sizing function,＼

      `max^op( `max^op( %駒 の`最大-内容~供与$ ； %駒 ~IN %S ), 0 ) ◎ set its base size to the maximum of the items’ max-content contributions, floored at zero.

      `auto$vt ◎ For auto minimums: If the track has an auto min track sizing function＼

      1. ~IF［ `格子~容器$は［ `最小-内容~拘束$／`最大-内容~拘束$ ］の下で~sizeされている ］ ⇒ `max^op( `max^op( %駒 の［ `制限付き最小-内容~供与$／`制限付き最大-内容~供与$ ］ ； %駒 ~IN %S ), 0 ) ◎ and the grid container is being sized under a min-/max-content constraint, set the track’s base size to the maximum of its items’ limited min-/max-content contributions (respectively), floored at zero.＼
      2. ~ELSE ⇒ `max^op( `max^op( %駒 の`最小~供与$ ； %駒 ~IN %S ), 0 ) ◎ ↓

      %駒 の［ `制限付き最小-内容~供与@ ／ `制限付き最大-内容~供与$ ］は、 （この目的においては）次で与えられる ⇒ `max^op( `min^op( %駒 の［ `最小-内容~供与$／`最大-内容~供与$ ］, %上限 ), %駒 の`最小~供与$ ) — ここで %上限 は、 %筋 の`~max筋~sizing関数$ （これは、 `fit-content$f 筋~sizing関数への引数にもなり得る） に応じて ⇒＃ `固定的~sizing関数$であるならば それ／ ~ELSE_ 無限大 ◎ The limited min-/max-content contribution of an item is (for this purpose) its min-/max-content contribution (accordingly), limited by the max track sizing function (which could be the argument to a fit-content() track sizing function) if that is fixed and ultimately floored by its minimum contribution (defined below). ◎ ↑Otherwise, set the track’s base size to the maximum of its items’ minimum contributions, floored at zero.＼

      %駒 の `最小~供与@ は、 %駒 の`外縁~size$として可能な最~小になる — 特定的には： ◎ The minimum contribution of an item is the smallest outer size it can have. Specifically,＼

      • %駒 の算出d`選好d~size$は，関連な軸において［ `~autoとして挙動する$か， %駒 の`包含塊$の~sizeに依存する ］場合 ⇒ %駒 の使用`最小~size$は`選好d~size$に等しいと見做したときの，結果の`外縁~size$ ◎ if the item’s computed preferred size behaves as auto or depends on the size of its containing block in the relevant axis, its minimum contribution is the outer size that would result from assuming the item’s used minimum size as its preferred size;＼
      • 他の場合 ⇒ %駒 の`最小-内容~供与$ ◎ else the item’s minimum contribution is its min-content contribution.＼

      `最小~供与$は、 %駒 の内容の~sizeに依存することが多いので， `内在的~size供与$の一種と見なされる。 ◎ Because the minimum contribution often depends on the size of the item’s content, it is considered a type of intrinsic size contribution.

      注記：† %駒 に指定された`最小~size$が `~autoS$v （初期~値）の場合の結果は、 通例的には %駒 の`最小-内容~供与$と等価になるが， 異なる事例もある。 `§ 格子~駒の自動的な最小~size$を見よ。 また、 次が満たされる ⇒ `最小~供与$ ~LTE `最小-内容~供与$ ~LTE `最大-内容~供与$ ◎ Note: For items with a specified minimum size of auto (the initial value), the minimum contribution is usually equivalent to the min-content contribution—but can differ in some cases, see § 6.6 Automatic Minimum Size of Grid Items. Also, minimum contribution ≤ min-content contribution ≤ max-content contribution.

   5. ~IF［ %筋 の`~max筋~sizing関数$は`内在的~sizing関数$である ］ ⇒ %筋 の`拡幅~上限$ ~SET %筋 の`~max筋~sizing関数$に応じて： ◎ ↓

      `min-content$vt ◎ For min-content maximums:

      `max^op( %駒 の`最小-内容~供与$ ； %駒 ~IN %S ) ◎ If the track has a min-content max track sizing function, set its growth limit to the maximum of the items’ min-content contributions.

      `max-content$vt （ `auto$vt, `fit-content$f も含む） ◎ For max-content maximums:

      `max^op( %駒 の`最大-内容~供与$ ； %駒 ~IN %S ) ◎ If the track has a max-content max track sizing function, set its growth limit to the maximum of the items’ max-content contributions.＼

      ただし， `fit-content$f の場合は ⇒ `max^op( 上の結果, `fit-content^f の引数 ) ◎ For fit-content() maximums, furthermore clamp this growth limit by the fit-content() argument.

   6. %筋 の`拡幅~上限$ ~SET `max^op( %筋 の`拡幅~上限$, %筋 の`基底~size$ ) ◎ In all cases, if a track’s growth limit is now less than its base size, increase the growth limit to match the base size.

   注記： この段は、 下の［ 複数~筋に~spanしている駒たちを取扱う段 ］の単純~化であり，~span数 1 の駒に対し それを走らせたときと同じ挙動が得られるべきである。 ◎ Note: This step is a simplification of the steps below for handling spanning items, and should yield the same behavior as running those instructions on items with a span of 1.

3. %N ~LET 2

4. （~span数 %N を増やしながら、 内容により~sizeされる各~筋の~sizeを，下に与える %駒~群 を収容するように増やす）

   ~WHILE ［ ~span数 ~GTE %N なる駒は在る ］：

   ◎ Increase sizes to accommodate spanning items crossing content-sized tracks:＼
   1. %駒~群 ~LET 駒のうち，次を満たす駒たちが成す集合 ⇒ ［ ~span数 ~EQ %N ］~AND［ `~flex可能な~sizing関数$を伴う筋には~spanしない ］ ◎ Next, consider the items with a span of 2 that do not span a track with a flexible sizing function.
   2. ~IF［ %駒~群 は空である ］ ⇒＃ %N ~INCBY 1 ； ~CONTINUE ◎ ↑

   3. （`~min筋~sizing関数$は`内在的~sizing関数$である筋たちに，余った空間を分配する） ◎ ↓

      1. （各~駒の`最小~供与$ — 場合によっては`制限付き最小-内容~供与$ — を収容する）：

         1. %~size供与 ~LET ［ 次が満たされるならば `制限付き最小-内容~供与^i †／ ~ELSE_ `最小~供与^i ］ ⇒ 当の`格子~容器$は［ `最小-内容~拘束$／`最大-内容~拘束$ ］の下で~sizeされている
         2. `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, %~size供与, `基底~size^i, `~min筋~sizing関数$は`内在的~sizing関数$である筋たちが成す集合

         （複数~筋に~spanしている駒に対しては、 駒の［ `制限付き最小-内容~供与$／`制限付き最大-内容~供与$ ］を計算するために利用する %上限 は、［ 駒が~spanする各~筋の`~max筋~sizing関数$は、 どれも`固定的~sizing関数$である場合 ］に限り適用され， それらの`固定的~sizing関数$の`総和^emになる。）

         ◎ For intrinsic minimums: First distribute extra space to base sizes of tracks with an intrinsic min track sizing function, to accommodate these items’ minimum contributions. ◎ If the grid container is being sized under a min- or max-content constraint, use the items’ limited min-content contributions in place of their minimum contributions here.＼ (For an item spanning multiple tracks, the upper limit used to calculate its limited min-/max-content contribution is the sum of the fixed max track sizing functions of any tracks it spans, and is applied if it only spans such tracks.)
      2. （各~駒の`最小-内容~供与$を収容する） ⇒ `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, `最小-内容~供与^i, `基底~size^i, `~min筋~sizing関数$は［ `min-content$vt ／ `max-content$vt ］である筋たちが成す集合 ◎ For content-based minimums: Next continue to distribute extra space to the base sizes of tracks with a min track sizing function of min-content or max-content, to accommodate these items' min-content contributions.
      3. （各~駒の`制限付き最大-内容~供与$を収容する） ⇒ ~IF［ `格子~容器$は`最大-内容~拘束$の下で~sizeされている ］ ⇒ `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, `制限付き最大-内容~供与^i, `基底~size^i, `~min筋~sizing関数$は［ `auto^v ／ `max-content$vt ］である筋たちが成す集合 ◎ For max-content minimums: Next, if the grid container is being sized under a max-content constraint, continue to distribute extra space to the base sizes of tracks with a min track sizing function of auto or max-content, to accommodate these items' limited max-content contributions.
      4. 【！In all cases, は、上のすべての段を指すであろう 】 （各~駒の`最大-内容~供与$を収容する） ⇒ `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, `最大-内容~供与^i, `基底~size^i, `~min筋~sizing関数$は `max-content$vt である筋たちが成す集合 ◎ In all cases, continue to distribute extra space to the base sizes of tracks with a min track sizing function of max-content, to accommodate these items' max-content contributions.
   4. ~EACH( %筋 ) に対し ⇒ %筋 の`拡幅~上限$ ~SET `min^op( %筋 の`拡幅~上限$, %筋 の`基底~size$ ) ◎ If at this point any track’s growth limit is now less than its base size, increase its growth limit to match its base size.

   5. （`~max筋~sizing関数$は`内在的~sizing関数$である筋たちに，余った空間を分配する）

      1. （各~駒の`最小-内容~供与$を収容する） ⇒ `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, `最小-内容~供与^i, `拡幅~上限^i, `~max筋~sizing関数$は`内在的~sizing関数$である筋たちが成す集合 ◎ For intrinsic maximums: Next distribute extra space to the growth limits of tracks with intrinsic max track sizing function, to accommodate these items' min-content contributions.＼

         ［ この段で`拡幅~上限$が無限から有限に変化した各~筋 ］は、 次の段のために `無限に拡幅-可能@ とする ◎ Mark any tracks whose growth limit changed from infinite to finite in this step as infinitely growable for the next step.

         “無限に拡幅-可能” は何のためにあるかについて… 【以下、この段の内容は未訳（`~~参照＠https://lists.w3.org/Archives/Public/www-style/2014Mar/0500.html$）】 【！＊ 】 ◎ Why does the infinitely growable flag exist? Peter Salas explains: Consider the following case: Two "auto" tracks (i.e. minmax(min-content, max-content) minmax(min-content, max-content)). Item 1 is in track 1, and has min-content = max-content = 10. Item 2 spans tracks 1 and 2, and has min-content = 30, max-content = 100. After resolving min-content/max-content for the first item, we have this. track 1: base size = 10 growth limit = 10 track 2: base size = 0 growth limit = infinity Then we resolve min-content/max-content for the second item. Phase 1 sets the base size of track 2 to 20 so that the two tracks' base sizes sum to 30. Phase 2 does nothing because there are no relevant tracks. Phase 3 sets the growth limit of track 2 to 20 so that the two tracks' growth limits sum to 30. In phase 4, we need to grow the sum of the growth limits by 70 to accommodate item 2. Two options are: 1. Grow each track’s growth limit equally, and end up with growth limits = [45, 55]. 2. Grow only the second track’s growth limit, and end up with growth limits = [10, 90]. By not considering the just-set growth limit as a constraint during space distribution (i.e. by treating it as infinity), we get the second result, which we considered a better result because the first track remains sized exactly to the first item.

      2. （各~駒の`最大-内容~供与$を収容する） ⇒ `余った空間を分配する$( ↓ ) ⇒＃ %駒~群, `最大-内容~供与^i, `拡幅~上限^i, `~max筋~sizing関数$は `max-content$vt であるである筋たちが成す集合 ◎ For max-content maximums: Lastly continue to distribute extra space to the growth limits of tracks with a max track sizing function of max-content, to accommodate these items' max-content contributions.＼

         ただし，この段では、［ `~max筋~sizing関数$が `fit-content$f として与えられた筋 ］については，その引数を拡幅の上限とする。 ◎ However, limit the growth of any fit-content() tracks by their fit-content() argument.

   6. %N ~INCBY 1 ◎ Repeat incrementally for items with greater spans until all items have been considered.

5. （`~flex可能$な筋に~spanしている駒を収容するよう，それらの筋~sizeを増やす） ◎ Increase sizes to accommodate spanning items crossing flexible tracks:

   次に従う下で、 前~段の ~WHILE 内の手続きを 1 回だけ行う （ %N は関わらない） ◎ Next, repeat the previous step instead considering (together, rather than grouped by span size)＼

   • %駒~群 は、 `~flex可能な~sizing関数$を伴う筋にも~spanするものからなる。 ◎ all items that do span a track with a flexible sizing function while
   • `~flex可能$な筋のみに空間を分配する （すなわち、 他のすべての筋は，`固定的~sizing関数$を伴うものと扱う）。 ◎ distributing space only to flexible tracks (i.e. treating all other tracks as having a fixed sizing function)

   • ［ 駒が~spanする`~flex可能$な筋たち ］に対しては、 それら［ 各~筋の`~flex可能な~sizing関数$ ］の総和に応じて： ◎ if the sum of the flexible sizing functions of all flexible tracks spanned by the item＼

     • 総和 ~GT 1 になる場合 ⇒ 各~筋の`~flex可能な~sizing関数$の比に則って，空間を各~筋に分配する — 空間を等しく分配するのでなく。 ◎ is greater than or equal to one, distributing space to such tracks according to the ratios of their flexible sizing functions rather than distributing space equally;＼
     • 総和 ~LTE 1 になる場合 ⇒ 各~筋の`~flex可能な~sizing関数$の比に則って，空間の［ 当の総和に比例する分 ］を各~筋に分配した上で、 残りを各~筋に等しく分配する ◎ and if the sum is less than one, distributing that proportion of space according to the ratios of their flexible sizing functions and the rest equally
6. ~EACH( %筋 ) に対し ⇒ ~IF［ %筋 の`拡幅~上限$は無限である （例えば，［ 駒が配置されていない／`~flex可能$な筋である ］ため） ］ ⇒ %筋 の`拡幅~上限$ ~SET %筋 の`基底~size$ ◎ If any track still has an infinite growth limit (because, for example, it had no items placed in it or it is a flexible track), set its growth limit to its base size.

注記： 複数の筋に~spanする駒があるとき、 内在的~sizingによる拘束を満たすような~~一意な仕方は無い。 この~algoは、 この仕様の `§ 序論＠#intro$ に述べた “ゲーム” の例など，［ 現実の利用事例で良好な結果が得られるようにする，いくつかの経験則 ］を組織化する。 この~algoは、 より進んだ経験則が将来に~~見出されたなら，それを織り込むよう更新され得る。 ◎ Note: There is no single way to satisfy intrinsic sizing constraints when items span across multiple tracks. This algorithm embodies a number of heuristics which have been seen to deliver good results on real-world use-cases, such as the “game” examples earlier in this specification. This algorithm may be updated in the future to take into account more advanced heuristics as they are identified.

12.6. 筋を最大~化する

`~free空間$が正である場合、 それを，すべての筋の`基底~size$に等しく分配する — その際には、 `拡幅~上限$に達した筋は，そこで凍結する （他の筋は拡幅させ続ける）。 ◎ If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

これにより，格子が［［ `max-width$p ／ `max-height$p ］で制限された，`格子~容器$の`内縁~size$ ］より大きくなった場合、 次を加味する下で，この段をやり直す ⇒ 格子を，その［ `max-width$p ／ `max-height$p ］に~sizeするときは、［ `可用な格子~空間$は，`格子~容器$の`内縁~size$に等しい ］ものと扱う。 ◎ If this would cause the grid to be larger than the grid container’s inner size as limited by its max-width/height, then redo this step, treating the available grid space as equal to the grid container’s inner size when it’s sized to its max-width/height.

12.7. ~flex可能な筋を拡げる

この段では、 `~flex可能$な筋を［ `可用な空間$を超過せずに `fr$u にアテガえる，最~大な値 ］を利用して~sizeする。 ◎ This step sizes flexible tracks using the largest value it can assign to an fr without exceeding the available space.

1. %使用~flex割合分 ~LET 0 （格子の使用`~flex割合分$を表す） ◎ First, find the grid’s used flex fraction:
2. ~IF［ `~free空間$ ~EQ 0 ］~OR［ `最小-内容~拘束$の下で`格子~容器$を~sizeしている ］ ⇒ 何もしない ◎ If the free space is zero or if sizing the grid container under a min-content constraint: • The used flex fraction is zero.
3. ~ELIF［ `~free空間$は`確定的$である ］ ⇒ %使用~flex割合分 ~SET `~fr~sizeを見出す$( すべての`筋$, `可用な格子~空間$ ) ◎ Otherwise, if the free space is a definite length: • The used flex fraction is the result of finding the size of an fr using all of the grid tracks and a space to fill of the available grid space.

4. ~ELSE（ `~free空間$は`不定$である）： ◎ Otherwise, if the free space is an indefinite length: • The used flex fraction is the maximum of:

   1. ~EACH( `~flex可能$な筋 %筋 ) に対し：

      1. %基底~size ~LET %筋 の`基底~size$
      2. ~IF［ %筋 の`~flex係数$ ~GT 1 ］ ⇒ %基底~size ~SET %基底~size ~DIV %筋 の`~flex係数$
      3. %使用~flex割合分 ~SET `max^op( %使用~flex割合分, %基底~size )
      ◎ For each flexible track, if the flexible track’s flex factor is greater than one, the result of dividing the track’s base size by its flex factor; otherwise, the track’s base size.

   2. 格子を成す ~EACH( `駒$ %駒 ) に対し：

      1. ~IF［ %駒 は`~flex可能$な筋に交叉しない ］ ⇒ ~CONTINUE
      2. %駒~fr~size ~LET `~fr~sizeを見出す$( %駒 が交叉する筋~すべて, %駒 の`最大-内容~供与$ )
      3. %使用~flex割合分 ~SET `max^op( %使用~flex割合分, %駒~fr~size )
      ◎ For each grid item that crosses a flexible track, the result of finding the size of an fr using all the grid tracks that the item crosses and a space to fill of the item’s max-content contribution.

   この`~flex割合分$の利用により、 `格子$が`格子~容器$の［ `min-width$p ／ `min-height$p ］より小さくなる場合 （あるいは［ `max-width$p ／ `max-height$p ］より大きくなる場合） ⇒ 次を加味する下で，この段をやり直す：

   • `~free空間$は確定的であるものと扱う。
   • 格子を，その［ `min-width$p ／ `min-height$p ］（あるいは `max-width$p ／ `max-height$p ）に~sizeするときは、［ `可用な格子~空間$は，`格子~容器$の`内縁~size$に等しい ］ものと扱う。

   ◎ If using this flex fraction would cause the grid to be smaller than the grid container’s min-width/height (or larger than the grid container’s max-width/height), then redo this step, treating the free space as definite and the available grid space as equal to the grid container’s inner size when it’s sized to its min-width/height (max-width/height).
5. ~EACH( `~flex可能$な筋 %筋 ) に対し ⇒ %筋 の`基底~size$ ~SET `max^op( %筋 の`基底~size$, ( %使用~flex割合分 ~MUL ( %筋 の`~flex係数$ ) ) ◎ For each flexible track, if the product of the used flex fraction and the track’s flex factor is greater than the track’s base size, set its base size to that product.

12.8. `auto^v 筋を伸張する

この段は、 `格子~容器$の`内容-分布~prop$がこの軸において［ `~normalJC$v ／ `~stretchAC$v ］のとき，［ `~max筋~sizing関数$が `auto$vt にされた筋 ］たちを［ 残っている`確定的$かつ正な`~free空間$を~~均等に分ける ］ことにより拡げる。 `~free空間$は`不定$であるが`格子~容器$の［ `min-width$p ／ `min-height$p ］は`確定的$である場合、 この段のために`~free空間$を計算するときには，代わりに その確定的~sizeを利用する。 ◎ When the content-distribution property of the grid container is normal or stretch in this axis, this step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.

13.1. 断片化~algoの一例

これはまだ，断片化~algoの一例を示す大まかな草案に過ぎず， `CSS-FLEXBOX-1$r による~algoと突き合わせて厳しく検査する必要がある。 `Feedback overall is welcome; please reference the rules above instead as implementation guidance.^en 【以下は、横組みを念頭に記されている。縦組みの場合は，横幅と縦幅の役割が入れ替わるであろう。】 ◎ This is a rough draft of one possible fragmentation algorithm, and still needs to be severely cross-checked with the [CSS-FLEXBOX-1] algorithm for consistency. Feedback is welcome; please reference the rules above instead as implementation guidance.

1. `§ 格子~layout~algo$に従って，格子を~layoutする — 格子の［ `行内~size$は`断片化~容器$のそれ, `塊~size$は無制限 ］であるものと見做した下で。 `grid-row$p に対する `auto$vt 値, `fr$u 単位の値は、 すべて この段の間に解決するモノトスル。 ◎ Layout the grid following the § 12 Grid Layout Algorithm by using the fragmentation container’s inline size and assume unlimited block size. During this step all grid-row auto and fr values must be resolved.
2. 前~段で解決された値を利用して格子~容器を~layoutする。 ◎ Layout the grid container using the values resolved in the previous step.

3. 断片化により ある区画の~sizeが変化した場合 （これを決めるにあたり，複数の~rowに~spanする駒は含めないこと）、 ~OR↓ を満たす各~row用に，必要yなだけ格子~row~sizeを増やす： ◎ If a grid area’s size changes due to fragmentation (do not include items that span rows in this decision), increase the grid row size as necessary for rows that either:

   • ~rowの`~min筋~sizing関数$は `*-content^v である。 ◎ have a content min track sizing function.
   • ~rowは，明示的な縦幅を持たない格子に属し，`~flex可能$でもある。 ◎ are in a grid that does not have an explicit height and the grid row is flexible.
4. 格子の縦幅が `auto$vt【！auto】 の場合、 格子の縦幅は，各~rowの最終的な~sizeの総和になるべきである。 ◎ If the grid height is auto, the height of the grid should be the sum of the final row sizes.
5. 断片化において~marginが`相殺-$されたために，区画が格子~容器を~overflowする場合、 その区画を包含するよう格子~容器を拡張する （この段は、 断片化による~layoutの循環依存を避けるために必要yである。） ◎ If a grid area overflows the grid container due to margins being collapsed during fragmentation, extend the grid container to contain this grid area (this step is necessary in order to avoid circular layout dependencies due to fragmentation).

注記： 格子に縦幅が指定されている場合、 3 段~目, 4 段~目において，格子~rowは格子を~overflowし得る。 ◎ If the grid’s height is specified, steps three and four may cause the grid rows to overflow the grid.