CSS 网格布局模块第 1 级

如果您注意到此网格布局模块与弹性盒子布局模块之间存在任何不一致之处，请向 CSSWG 报告，因为这很可能是一个错误。

1. 引言

本节内容不具有规范性。

网格布局是 CSS 的一种新的布局模型，它具有强大的功能来控制盒子及其内容的尺寸和定位。与弹性盒子布局（Flexbox）的单轴导向不同，网格布局针对二维布局进行了优化：即需要在两个维度上对齐内容的布局。

弹性布局示例：两行项目，第一行是三个项目，每个项目占据三分之一的空间；第二行是五个项目，每个项目占据五分之一的空间。因此，沿“行”方向存在对齐，但沿“列”方向不存在对齐。 — 代表性的弹性布局示例

网格布局示例：两行项目，第一行是四个项目——最后一个项目跨越两行；第二行是两个项目——第一个项目跨越前两列——外加第一行跨行过来的项目。 — 代表性的网格布局示例

此外，由于其能够显式地在网格中定位项目，网格布局允许在视觉布局结构上进行显著的转换，而无需相应的标记更改。通过将媒体查询与控制网格容器及其子元素布局的 CSS 属性相结合，作者可以使其布局适应设备外形、方向和可用空间的变化，同时在不同呈现方式下保持更理想的内容语义结构。

尽管许多布局都可以用网格或弹性盒子来表达，但它们各有专长。网格强制执行二维对齐，采用自上而下的布局方法，允许项目显式重叠，并具有更强大的跨越能力。弹性盒子专注于轴内的空间分配，采用更简单的自下而上的布局方法，可以使用基于内容尺寸的换行系统来控制其次要轴，并依赖于底层的标记层次结构来构建更复杂的布局。预计这两者都将成为 CSS 作者有价值且互补的工具。

1.1. 背景与动机

图片：需要水平和垂直对齐的应用程序布局示例。 — 需要水平和垂直对齐的应用程序布局示例。

随着网站从简单的文档演变为复杂的交互式应用程序，用于文档布局的技术（例如浮动）不一定非常适合应用程序布局。通过结合使用表格、JavaScript 或对浮动元素进行仔细测量，作者们发现了实现所需布局的变通方法。适应可用空间的布局通常很脆弱，并且在空间受限时会导致与直觉相反的行为。作为替代方案，许多 Web 应用程序的作者选择了固定布局，这种布局无法利用屏幕上可用渲染空间的变化。

网格布局的功能解决了这些问题。它为作者提供了一种机制，可以使用一组可预测的尺寸调整行为将可用于布局的空间划分为列和行。然后，作者可以将应用程序的构建块元素精确地定位和调整到由这些列和行的交集定义的网格区域中。以下示例说明了网格布局的自适应能力，以及它如何实现内容和样式的更清晰分离。

1.1.1. 使布局适应可用空间

让我们考虑一个游戏的布局，它分为两列三行：游戏标题在左上角，菜单在其下方，分数在左下角，游戏板占据右上角和中间单元格，游戏控件填充左下角。左列的大小正好适合其内容（游戏标题、菜单项和分数），右列填充剩余空间。 — 根据内容大小和可用空间排列的五个网格项目。

随着更大屏幕中可用空间的增加，中间行/右列可以扩展以填充该空间。 — 由于可用空间增加导致的网格增长。

网格布局可用于智能地调整网页内元素的大小。相邻的图表示一个游戏，其布局包含五个主要组件：游戏标题、统计区域、游戏板、得分区域和控制区域。作者的意图是将游戏空间划分如下：

统计区域始终显示在游戏标题的正下方。
游戏板显示在统计区域和标题的右侧。
游戏标题的顶部和游戏板的顶部应始终对齐。
当游戏达到其最小高度时，游戏板的底部和统计区域的底部对齐。在所有其他情况下，游戏板将拉伸以利用其可用的所有空间。
控件在游戏板下方居中。
得分区域的顶部与控件区域的顶部对齐。
得分区域位于统计区域下方。
得分区域与统计区域下方的控件对齐。

以下网格布局示例显示了作者如何以声明方式实现所有尺寸、定位和对齐规则。

/**
 * 通过在网格容器上声明网格，
 * 为每个网格项目定义空间。
 */
#grid {
    /**
   * 两列：
   *  1. 第一列根据内容调整大小，
   *  2. 第二列获得剩余空间
   *     （但绝不小于游戏板的最小尺寸
   *     或占据此列的游戏控件 [图 4]）
   *
   * 三行：
   *  3. 第一行根据内容调整大小，
   *  4. 中间行获得剩余空间
   *     （但绝不小于游戏板或统计区域的最小高度）
   *  5. 最后一行根据内容调整大小。
   */
    display: grid;
    grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
    grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* 使用每个网格项目的 'grid-row' 和 'grid-column' 属性上的坐标
 * 指定每个网格项目的位置。
 */
#title    { grid-column: 1; grid-row: 1; }
#score    { grid-column: 1; grid-row: 3; }
#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#board    { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

<div id="grid">
    <div id="title">游戏标题</div>
    <div id="score">分数</div>
    <div id="stats">统计</div>
    <div id="board">棋盘</div>
    <div id="controls">控件</div>
</div>

注意：有多种方法可以指定网格的结构以及定位和调整网格项目的大小，每种方法都针对不同的场景进行了优化。

1.1.2. 源顺序独立性

继续前面的示例，作者还希望游戏能够适应不同的设备。此外，游戏应在纵向或横向查看时优化组件的放置（图 6 和图 7）。通过将网格布局与媒体查询相结合，作者能够使用相同的语义标记，但可以独立于其源顺序重新排列元素的布局，以在两种方向上实现所需的布局。

以下示例使用了网格布局命名网格项目将占据的空间的能力。这使得作者可以避免在网格定义更改时重写网格项目的规则。

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

    /* 网格的行、列和区域使用 grid-template-areas 属性进行可视化定义。
     * 每个字符串是一行，每个单词是一个区域。字符串中单词的数量
     * 决定了列的数量。请注意，每个字符串中的单词数量必须相同。 */
    grid-template-areas: "title stats"
                "score stats"
                "board board"
                "ctrls ctrls";

    /* 可以使用 grid-template-columns 和 grid-template-rows 属性
     * 分配调整列和行大小的方式。 */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
    }
}

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

    /* template 属性再次定义了同名区域，
     * 但这次的位置不同，以更好地适应横向方向。 */
    grid-template-areas: "title board"
                "stats board"
                "score ctrls";

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

/* grid-area 属性将网格项目放置到网格的命名区域中。 */
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

<div id="grid">
    <div id="title">游戏标题</div>
    <div id="score">分数</div>
    <div id="stats">统计</div>
    <div id="board">棋盘</div>
    <div id="controls">控件</div>
</div>

注意：网格布局的重新排序功能有意仅影响视觉渲染，语音顺序和导航仍基于源顺序。这允许作者操纵视觉呈现，同时保持源顺序完整并针对非 CSS UA 以及线性模型（如语音和顺序导航）进行优化。

网格项目放置和重新排序不得用作正确源排序的替代方法，因为这会破坏文档的可访问性。

1.2. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，并使用 [CSS-VALUES-3] 中的值定义语法。本规范中未定义的值类型在 CSS 值和单位 [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

除了在其定义中列出的特定于属性的值之外，本规范中定义的所有属性也接受 CSS 范围关键字作为其属性值。为便于阅读，未明确重复它们。

2. 概述

本节内容不具有规范性。

网格布局通过使用网格来控制其内容的布局：一组相交的水平线和垂直线，为网格容器的内容创建了一个尺寸和定位坐标系。网格布局的特性包括：

固定、灵活和基于内容的轨道尺寸调整函数
通过向前（正）和向后（负）的数字网格坐标、命名的网格线和命名的网格区域进行显式项目放置；自动将项目放置到空白区域，包括使用 order 进行重新排序
空间敏感的轨道重复以及自动添加行或列以容纳额外内容
使用外边距、间距和对齐属性控制对齐和间距
使用 z-index 控制内容重叠和分层的能力

网格容器可以根据需要与弹性容器嵌套或混合使用，以创建更复杂的布局。

2.1. 声明网格

网格的轨道（行和列）的声明和尺寸调整要么通过显式网格属性明确声明，要么在项目放置在显式网格之外时隐式创建。 grid 简写属性及其子属性定义了网格的参数。 § 7 定义网格

以下是一些网格声明的示例：

以下代码声明了一个包含四个命名区域的网格：H、A、B 和 F。第一列的尺寸根据其内容自适应（auto），第二列占据剩余空间（1fr）。行默认采用auto （基于内容）的尺寸调整方式；最后一行被赋予 30px 的固定尺寸。
```
main {
    display: grid;
    grid: "H    H "
        "A    B "
        "F    F " 30px
    /     auto 1fr;
}
```
以下代码声明了一个网格，其行数尽可能多，每行至少 5em 高，以适应网格容器的高度（100vh）。该网格没有显式列；相反，列会随着内容的添加而添加，最终的列宽会均等化（1fr）。由于向右溢出的内容不会打印，因此打印的备用布局会改为添加行。
```
main {
    display: grid;
    grid: repeat(auto-fill, 5em) / auto-flow 1fr;
    height: 100vh;
}
@media print {
    display: grid;
    main {
    grid: auto-flow 1fr / repeat(auto-fill, 5em);
    }
}
```
以下代码声明了一个包含 5 个等宽列和三行的网格，中间行占据所有剩余空间（并且至少足以容纳其内容）。
```
main {
    display: grid;
    grid: auto 1fr auto / repeat(5, 1fr);
    min-height: 100vh;
}
```

2.2. 放置项目

网格容器的内容被组织成独立的网格项目（类似于弹性项目），然后将这些项目分配给网格中预定义的网格区域。它们可以通过网格放置属性使用坐标显式放置，或者使用自动放置隐式放置到空白区域。 § 8 放置网格项目

以下是使用 grid-area 简写属性进行网格放置声明的一些示例：

grid-area: a;          /* 放置到名为“a”的网格区域     */
grid-area: auto;       /* 自动放置到下一个空白区域    */
grid-area: 2 / 4;      /* 放置到第 2 行，第 4 列         */
grid-area: 1 / 3 / -1; /* 放置到第 3 列，跨越所有行 */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                        /* 使用命名的网格线进行放置            */

这些等同于以下 grid-row + grid-column 声明：

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

它们可以进一步分解为 grid-row-start/grid-row-end/grid-column-start/grid-column-end 完整属性，例如：

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

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

2.3. 调整网格尺寸

当网格项目放置完毕后，会计算网格轨道（行和列）的尺寸，并根据网格定义中指定的其内容尺寸和/或可用空间进行调整。

调整尺寸后的网格会根据网格容器的 align-content 和 justify-content 属性，在网格容器内进行对齐。 § 10 对齐与间距

以下示例通过在列之间分配任何多余空间来对齐所有列，并在网格小于 100vh 时将其在网格容器中居中。

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

最后，每个网格项目都会根据其自身的尺寸调整 [CSS2] 和对齐属性 [CSS-ALIGN-3]，在其分配的网格区域内进行尺寸调整和对齐。

3. 网格布局概念与术语

在网格布局中，网格容器的内容通过将其定位和对齐到网格中进行布局。网格是一组相交的水平和垂直网格线，它将网格容器的空间划分为网格区域，网格项目（代表网格容器的内容）可以放置在这些区域中。有两组网格线：一组定义沿块轴方向的列，另一组正交的线定义沿行内轴方向的行。 [CSS3-WRITING-MODES]

3.1. 网格线

网格线是网格的水平和垂直分割线。网格线存在于列或行的两侧。它们可以通过数字索引引用，也可以通过作者指定的名称引用。网格项目使用网格放置属性引用网格线来确定其在网格中的位置。

以下两个示例都创建了三条列网格线和四条行网格线。

第一个示例演示了作者如何使用网格线编号来定位网格项目：

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

第二个示例使用了明确命名的网格线：

/* 与前一个示例等效的布局，但使用了命名的网格线 */
#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. 网格轨道和单元格

网格轨道是网格列或网格行的通用术语——换句话说，它是两条相邻网格线之间的空间。每个网格轨道都被分配一个尺寸调整函数，该函数控制列或行可以增长多宽或多高，从而控制其边界网格线之间的距离。相邻的网格轨道可以通过间距分隔，否则它们会紧密排列。

网格单元格是网格行和网格列的交集。它是定位网格项目时可以引用的网格的最小单位。

在以下示例中，有两列三行。第一列固定为 150px。第二列使用弹性尺寸调整，这是网格中未分配空间的函数，因此会随着网格容器宽度的变化而变化。如果网格容器的已用宽度为 200px，则第二列的宽度为 50px。如果网格容器的已用宽度为 100px，则第二列的宽度为 0px，并且任何定位在该列中的内容都将溢出网格容器。

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

3.3. 网格区域

网格区域是用于布局一个或多个网格项目的逻辑空间。一个网格区域由一个或多个相邻的网格单元格组成。它由四条网格线界定，网格区域的每一侧各有一条，并参与其相交的网格轨道的尺寸调整。网格区域可以使用网格容器的grid-template-areas属性显式命名，或通过其边界网格线隐式引用。网格项目使用网格放置属性分配给网格区域。

/* 使用模板语法 */
#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 }

/* 在网格区域 "b" 的不同点对齐项目 2 和 3。 */
/* 默认情况下，网格项目会拉伸以适应其网格区域    */
/* 并且这些项目会相互叠加。 */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

网格项目的网格区域构成了其布局的包含块。放置在同一网格区域中的网格项目不会直接影响彼此的布局。然而，间接地，占据具有固有尺寸调整函数的网格轨道的网格项目会影响该轨道的尺寸（从而影响其边界网格线的位置），这反过来又会影响另一个网格项目的位置或尺寸。

4. 重新排序与可访问性

网格布局赋予了作者对文档进行重新排列的强大能力。然而，这并不能替代正确的文档源顺序。 order 属性和网格放置并不会影响非可视化媒体（例如语音）中的顺序。同样，在视觉上重新排列网格项目也不会影响顺序导航模式的默认遍历顺序（例如循环浏览链接，参见例如 tabindex [HTML]）。

作者必须仅将 order 和网格放置属性用于内容的视觉重新排序，而非逻辑重新排序。使用这些特性执行逻辑重新排序的样式表是不符合规范的。

注意：这样做是为了让非可视化媒体和非 CSS 用户代理（通常以线性方式呈现内容）可以依赖于逻辑源顺序，而网格布局的放置和排序特性则用于调整视觉排列。（由于视觉感知是二维且非线性的，期望的视觉顺序并不总是等同于期望的阅读顺序。）

许多网页在标记结构上具有相似的形状，顶部是页眉，底部是页脚，中间是内容区域和一到两个附加列。通常，期望内容在页面的源代码中首先出现，在附加列之前。然而，这使得许多常见的设计，例如简单地将附加列放在左侧，内容区域放在右侧，难以实现。多年来，这个问题已经通过许多方式得到解决，当有两个附加列时，通常被称为“圣杯布局”。网格布局使这个例子变得微不足道。例如，以下是一个页面代码及其期望布局的草图：

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

在此页面中，页眉位于顶部，页脚位于底部，但主要内容位于中间，导航栏位于右侧，侧边栏位于左侧。

使用网格布局可以轻松实现此布局：

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

另外一个好处是，默认情况下，所有列的高度都将相等，并且主要内容的宽度将足以填充屏幕。此外，这还可以与媒体查询结合使用，以便在窄屏幕上切换到全垂直布局：

@media all and (max-width: 60em) {
    /* 宽度不足以支持三列 */
    body { display: block; }
}

为了在所有呈现模式下保留作者预期的顺序，创作工具——包括所见即所得编辑器以及基于 Web 的创作辅助工具——必须重新排序底层文档源，并且不得使用 order 或网格放置属性来执行重新排序，除非作者明确指出底层文档顺序（决定语音和导航顺序）应与视觉顺序不同步。

例如，一个工具可能同时提供网格项目的拖放排列功能以及针对不同屏幕尺寸范围的媒体查询备用布局处理功能。

由于大多数情况下，重新排序应影响所有屏幕范围以及导航和语音顺序，因此该工具将通过同时重新排序 DOM 层来匹配最终的拖放视觉排列。然而，在某些情况下，作者可能希望每个屏幕尺寸具有不同的视觉排列。该工具可以通过将网格放置属性与媒体查询结合使用来提供此功能，但同时也将最小屏幕尺寸的排列与底层 DOM 顺序联系起来（因为这最有可能是一个逻辑线性呈现顺序），同时使用网格放置属性在其他尺寸范围内重新排列视觉呈现。

这个工具是符合规范的，而一个仅使用网格放置属性来处理拖放网格重新排列的工具（无论以这种方式实现多么方便）都是不符合规范的。

5. 网格容器

5.1. 建立网格容器：grid 和 inline-grid display 值

名称：	display
新值：	grid \| inline-grid

grid: 此值使元素生成一个网格容器盒，当放置在流式布局中时，该盒是块级的。
inline-grid: 此值使元素生成一个网格容器盒，当放置在流式布局中时，该盒是行内级的。

网格容器为其内容建立一个独立的网格格式化上下文。这与建立一个独立的块格式化上下文相同，只是使用网格布局代替了块布局：浮动不会侵入网格容器，并且网格容器的外边距不会与其内容的外边距折叠。网格容器的内容被布局到一个网格中，网格线构成了每个网格项目的包含块的边界。

网格容器不是块容器，因此一些设计时假设为块布局的属性在网格布局的上下文中不适用。特别是：

float 和 clear 对网格项目没有影响。然而，float 属性仍然会影响网格容器子元素的 display 的计算值，因为这发生在确定网格项目之前。
vertical-align 对网格项目没有影响。
::first-line 和 ::first-letter 伪元素不适用于网格容器，并且网格容器不会为其祖先贡献第一格式化行或首字母。

如果一个元素的指定 display 是 inline-grid 并且该元素是浮动的或绝对定位的，则 display 的计算值是 grid。因此，CSS 2.1 第 9.7 章中的表格被修改为包含一个额外的行，其中“指定值”列为 inline-grid， “计算值”列为 grid。

5.2. 调整网格容器尺寸

注意：有关本节术语的定义，请参见 [CSS-SIZING-3]。

网格容器使用其参与的格式化上下文的规则进行尺寸调整：

作为块格式化上下文中的块级盒，其尺寸调整方式类似于建立格式化上下文的块盒，其auto 行内尺寸的计算方式与非替换块盒相同。
作为行内格式化上下文中的行内级盒，其尺寸调整方式类似于原子行内级盒（例如 inline-block）。

在行内和块格式化上下文中，网格容器的auto 块尺寸是其最大内容尺寸。

块布局规范可能应该定义这一点，但尚未编写。

网格容器的最大内容尺寸（最小内容尺寸）是当网格在最大内容约束（最小内容约束）下调整尺寸时，网格容器在相应轴上的轨道尺寸（包括间距）的总和。

5.3. 可滚动网格溢出

overflow 属性适用于网格容器。

正如它包含在固有尺寸调整中一样（参见 § 5.2 调整网格容器尺寸），网格也包含在网格容器的可滚动溢出区域中。

注意：当网格容器是滚动容器时，请注意与内边距的交互：定义了将额外的内边距添加到可滚动溢出矩形，以便能够对可滚动内容进行 place-content: end 对齐。参见 CSS Overflow 3 § 2.2 可滚动溢出

5.4. 限制大网格

由于内存有限，用户代理可以隐式网格的可能大小限制在用户代理定义的限制内（该限制应能容纳范围在 [-10000, 10000] 内的网格线），并丢弃超出该限制的所有网格线。如果网格项目放置在此限制之外，则其网格区域必须限制在此受限网格内。

要限制网格区域：

如果网格区域将跨越到受限网格之外，则其跨度将被限制到受限网格的最后一条线。
如果网格区域将完全放置在受限网格之外，则其跨度必须截断为 1，并将该区域重新定位到网格该侧的最后一个网格轨道中。

例如，如果用户代理仅支持每个维度最多 1000 个轨道的网格，则以下放置属性：

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

最终将等效于：

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

6. 网格项目

不严格地说，网格容器的网格项目是表示其常规流内容的盒子。

网格容器的每个常规流子元素都会成为一个网格项目，并且每个子文本序列都会被包裹在一个匿名的块容器网格项目中。然而，如果文本序列仅包含空白字符（即可被 white-space 属性影响的字符），则它不会被渲染（就像其文本节点设置了 display:none 一样）。

网格项目示例：

<div style="display: grid">

    <!-- 网格项目：块级子元素 -->
    <div id="item1">块</div>

    <!-- 网格项目：浮动元素；浮动被忽略 -->
    <div id="item2" style="float: left;">浮动</div>

    <!-- 网格项目：围绕内联内容的匿名块盒 -->
    匿名项目 3

    <!-- 网格项目：内联子元素 -->
    <span>
    项目 4
    <!-- 网格项目不会在块周围分割 -->
    <q style="display: block" id=not-an-item>项目 4</q>
    项目 4
    </span>
</div>

从上述代码块确定的网格项目

注意：元素间的空白字符会消失：它不会成为自己的网格项目，即使元素间的文本确实会被包裹在一个匿名网格项目中。

注意：匿名项目的盒子是不可设置样式的，因为没有元素可以分配样式规则。然而，其内容将从网格容器继承样式（例如字体设置）。

6.1. 网格项目显示

网格项目为其内容建立一个独立的格式化上下文。然而，网格项目是网格级盒子，而不是块级盒子：它们参与其容器的网格格式化上下文，而不是块格式化上下文。

如果元素的最近祖先元素（跳过 display:contents 祖先）的计算后的 display 值是 grid 或 inline-grid，则元素自身的 display 值会块化。（有关此类 display 值转换的详细信息，请参见 CSS2.1§9.7 [CSS2] 和 CSS Display 3 § 2.7 自动盒类型转换。）

注意：即使 grid 或 inline-grid 元素最终没有生成网格容器盒（例如，当它是替换元素或位于 display: none 子树中时），块化仍然会发生。

注意：某些 display 值通常会触发在原始盒子周围创建匿名盒子。如果这样的盒子是网格项目，它会首先被块化，因此不会发生匿名盒子的创建。例如，两个连续的具有 display: table-cell 的网格项目将成为两个独立的 display: block 网格项目，而不是被包裹在一个匿名单格中。

6.2. 网格项目尺寸调整

网格项目在其网格区域定义的包含块内进行尺寸调整。

网格项目在给定维度中自动尺寸的计算因其自身对齐值而异：

normal

如果网格项目没有首选宽高比，并且在相关轴上没有自然尺寸（如果它是替换元素），则网格项目的尺寸调整方式与 align-self: stretch 相同。

否则，网格项目的尺寸调整方式与相应轴的块级元素的尺寸计算规则一致。（参见 CSS 2 § 10 可视化格式模型详细信息。）

stretch

使用非替换盒子的行内尺寸计算规则（定义在 CSS 2 § 10.3.3 正常流中的块级非替换元素中），即拉伸适应尺寸。

注意：如果具有首选宽高比的项目的尺寸在另一轴上也受到约束，则这可能会扭曲其宽高比。

所有其他值

将项目尺寸调整为 fit-content。

下表总结了网格项目的自动尺寸调整行为（信息性）：

网格项目自动尺寸调整行为摘要
对齐方式	非替换元素尺寸	替换元素尺寸
normal	填充网格区域	使用自然尺寸
stretch	填充网格区域	填充网格区域
start/center/等	fit-content 尺寸调整（类似于浮动）	使用自然尺寸

注意：min-width 和 min-height 的 auto 值对相关轴上的轨道尺寸调整的影响类似于它对弹性项目主尺寸的影响。参见 § 6.6 网格项目的自动最小尺寸。

6.3. 重排网格项目：order 属性

order 属性也适用于网格项目。它会影响它们的自动放置和绘制顺序。

与重排弹性项目一样， order 属性只能在视觉顺序需要与语音和导航顺序不同步时使用；否则应重新排序底层文档源。参见 [CSS-FLEXBOX-1] 中的 CSS Flexbox 1 § 5.4.1 重排与可访问性。

6.4. 网格项目外边距和内边距

由于相邻的网格项目独立地包含在其网格区域形成的包含块内，相邻网格项目的外边距不会折叠。

网格项目上的百分比外边距和内边距，与块盒上的百分比外边距和内边距一样，是相对于其包含块的行内尺寸解析的，例如，在水平书写模式中，左/右/上/下百分比都相对于其包含块的宽度进行解析。

自动外边距会扩展以吸收相应维度中的额外空间，因此可用于对齐。参见 § 10.2 使用自动外边距对齐

6.5. Z 轴排序：z-index 属性

当网格项目被定位到相交的网格区域时，或者即使由于负外边距或定位而定位在不相交的区域时，它们也可能重叠。网格项目的绘制顺序与内联块完全相同 [CSS2]，不同之处在于使用顺序修改的文档顺序代替原始文档顺序，并且z-index 值（auto 除外）即使position 是static，也会创建一个堆叠上下文（行为与position 为 relative 完全相同）。因此，可以轻松使用 z-index 属性来控制网格项目的 Z 轴顺序。

注意：定位在网格项目外部的后代元素仍参与由网格项目建立的任何堆叠上下文。

下图显示了几个重叠的网格项目，结合使用隐式源顺序和显式 z-index 来控制它们的堆叠顺序。

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

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

6.6. 网格项目的自动最小尺寸

注意：本节（以及规范其余部分）中使用的大部分尺寸术语定义在 CSS 固有和外部尺寸调整 [CSS-SIZING-3] 中。

为了给网格项目提供一个更合理的默认最小尺寸，其在给定轴上的自动最小尺寸的已用值是基于内容的最小尺寸，如果以下所有条件都为真：

其计算后的 overflow 不是可滚动溢出值
它在该轴上至少跨越一个轨道，该轨道的最小轨道尺寸调整函数是 auto
如果它在该轴上跨越多个轨道，则这些轨道都不是弹性轨道

否则，自动最小尺寸通常为零。

注意：基于内容的最小尺寸是一种固有尺寸贡献，因此 CSS Sizing 3 § 5.2 固有贡献中的规定适用。

给定维度中网格项目的基于内容的最小尺寸是其指定尺寸建议（如果存在），否则是其传递尺寸建议（如果存在且元素是替换元素），否则是其内容尺寸建议，见下文。然而，如果在给定维度中，网格项目仅跨越具有固定最大轨道尺寸调整函数的网格轨道，则其在该维度中的指定尺寸建议和内容尺寸建议（以及其从此维度到相反维度中传递尺寸建议的输入）将进一步限制为小于或等于拉伸适应到网格区域在该维度中的最大尺寸，该最大尺寸由这些网格轨道的最大轨道尺寸调整函数加上任何中间的固定间距的总和表示。

在所有情况下，尺寸建议还会受到受影响轴上最大尺寸的限制，如果它是确定的。如果项目是可压缩的替换元素，并且在相关轴上具有确定的首选尺寸或最大尺寸，则尺寸建议会受到这些尺寸的限制；为此，这些尺寸中的任何不确定百分比都将相对于零进行解析（并被视为确定的）。

注意：fit-content() 的参数不会像固定的最大轨道尺寸调整函数那样限制基于内容的最小尺寸。

此计算中使用的内容尺寸建议、指定尺寸建议和传递尺寸建议考虑了相关的最小/最大/首选尺寸属性，以便基于内容的最小尺寸不会干扰任何作者提供的约束，定义如下：

指定尺寸建议: 如果项目在相关轴上的首选尺寸是确定的，则指定尺寸建议是该尺寸。否则未定义。
传递尺寸建议: 如果项目具有首选宽高比并且其在相反轴上的首选尺寸是确定的，则传递尺寸建议是该尺寸（如果确定的，则受相反轴最小和最大尺寸的限制），通过宽高比转换。否则未定义。
如果项目在相关轴上具有确定的首选尺寸或最大尺寸，则传递尺寸建议会受到这些尺寸的限制；为此，这些尺寸中的任何不确定百分比都将相对于零进行解析（并被视为确定的）。
内容尺寸建议: 内容尺寸建议是相关轴上的最小内容尺寸，如果它具有首选宽高比，则受任何确定的相反轴最小和最大尺寸（通过宽高比转换）的限制。

为了计算盒子的固有尺寸（例如盒子的最小内容尺寸），基于内容的最小尺寸会导致盒子在该轴上的尺寸变得不确定（即使例如其width 属性指定了确定的尺寸）。请注意，这意味着根据此尺寸计算的百分比将表现为 auto。

对于计算固有尺寸以外的任何目的，基于内容的最小尺寸（与显式的 min-content/等最小尺寸不同）不会强制盒子的尺寸变得不确定。但是，如果在应用此最小值之前根据盒子的尺寸解析了百分比，则在应用之后必须根据新尺寸重新解析它。

请注意，虽然基于内容的最小尺寸通常是合适的，并且有助于防止内容重叠或溢出其容器，但在某些情况下并非如此：

特别是，如果网格布局用于文档的主要内容区域，最好设置一个明确的相对于字体的最小宽度，例如 min-width: 12em。基于内容的最小宽度可能导致大表格或大图像拉伸整个内容区域的大小，甚至可能进入溢出区域，从而使文本行变得不必要地长且难以阅读。

另请注意，当对具有大量内容的项目使用基于内容的尺寸调整时，布局引擎必须遍历所有这些内容才能找到其最小尺寸，而如果作者设置了显式最小值，则不需要这样做。（但是，对于内容量较小的项目，此遍历是微不足道的，因此不是性能问题。）

7. 定义网格

7.1. 显式网格

三个属性 grid-template-rows、grid-template-columns 和 grid-template-areas 通过指定其显式网格轨道，共同定义了网格容器的显式网格。由于网格项目放置在显式网格之外，最终网格可能会更大；在这种情况下，将创建隐式轨道，这些隐式轨道将由 grid-auto-rows 和 grid-auto-columns 属性确定大小。

显式网格的大小由 grid-template-areas 定义的行/列数与 grid-template-rows/grid-template-columns 确定大小的行/列数中较大者确定。任何由 grid-template-areas 定义但未由 grid-template-rows/grid-template-columns 确定大小的行/列，其大小取自 grid-auto-rows/grid-auto-columns 属性。如果这些属性没有定义任何显式轨道，则显式网格在每个轴上仍包含一条网格线。

网格放置属性中的数字索引从显式网格的边缘开始计数。正索引从起始侧计数（对于起始端最显式的线，从 1 开始），而负索引从结束侧计数（对于结束端最显式的线，从 -1 开始）。

grid 和 grid-template 属性是简写属性，可用于同时设置所有三个显式网格属性（grid-template-rows、grid-template-columns 和 grid-template-areas）。 grid 简写属性还会重置控制隐式网格的属性，而 grid-template 属性则使它们保持不变。

7.2. 显式轨道尺寸调整：grid-template-rows 和 grid-template-columns 属性

名称：	grid-template-columns, grid-template-rows
值：	none \| <track-list> \| <auto-track-list>
初始值：	none
适用于：	网格容器
继承性：	否
百分比：	参照内容区域的相应维度
计算值：	关键字 none 或计算轨道列表
规范顺序：	根据语法
动画类型：	如果列表长度匹配，则根据计算轨道列表中每项的计算值类型（参见 § 7.2.5 轨道列表的计算值和 § 7.2.3.3 repeat() 的插值/组合）；否则为离散

这些属性以空格分隔的轨道列表形式，指定网格的线名和轨道尺寸调整函数。 grid-template-columns 属性指定网格列的轨道列表，而 grid-template-rows 指定网格行的轨道列表。

值具有以下含义：

none: 表示此属性不创建任何显式网格轨道（尽管显式网格轨道仍可由 grid-template-areas 创建）。
注意：在没有显式网格的情况下，任何行/列都将隐式生成，其大小将由 grid-auto-rows 和 grid-auto-columns 属性确定。
<track-list> | <auto-track-list>: 将轨道列表指定为一系列轨道尺寸调整函数和线名。每个轨道尺寸调整函数可以指定为长度、网格容器大小的百分比、占据列或行的内容的度量，或网格中可用空间的分数。它也可以使用 minmax() 表示法指定为一个范围，该表示法可以组合任何先前提及的机制，为列或行指定单独的最小和最大轨道尺寸调整函数。

轨道列表的语法是：

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

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

其中组件值的定义如下…

7.2.1. 轨道尺寸

<length-percentage [0,∞]>

一个非负长度或百分比，由 CSS3 Values 定义。[CSS-VALUES-3]

<percentage> 值相对于列网格轨道中网格容器的内部内联尺寸，以及行网格轨道中网格容器的内部块级尺寸。如果网格容器的大小取决于其轨道的大小，则为了计算网格容器的固有大小，<percentage> 必须被视为 auto，然后根据最终的网格容器大小来解析，以便布局网格及其项目。

<flex [0,∞]>

一个带有单位 fr 的非负维度，指定轨道的弹性因子。每个以 <flex> 确定大小的轨道根据其弹性因子按比例分配剩余空间。例如，给定轨道列表为 1fr 2fr，这些轨道将分别占据剩余空间的 ⅓ 和 ⅔。更多详细信息请参见 § 7.2.4 弹性长度：fr 单位。

注意：如果弹性因子的总和小于 1，它们将只占据剩余空间的相应部分，而不是扩展以填充整个空间。

当出现在 minmax() 表示法之外时，意味着一个自动的最小值（即 minmax(auto, <flex>)）。

minmax(min, max)

定义一个大于或等于 min 且小于或等于 max 的尺寸范围。如果 max 小于 min，则 max 将被 min 向下取整（实质上产生 minmax(min, min)）。作为最大值，<flex> 值设置轨道的弹性因子；它作为最小值是无效的。

注意：此规范的未来级别可能允许 <flex> 最小值，并将更新轨道尺寸调整算法以正确处理此情况。

auto

作为最大值：表示占据网格轨道的网格项目的最大最大内容贡献；然而，与 max-content 不同，它允许通过 align-content 和 justify-content 属性扩展轨道。

作为最小值：表示占据网格轨道的网格项目的最大最小尺寸（由 min-width/min-height 指定）。（这最初通常但不总是等于 min-content 最小值——参见 § 6.6 网格项目的自动最小尺寸。）

当出现在 minmax() 表示法之外时：等效于 minmax(auto, auto)，表示上述最小值和最大值之间的范围。（在最基本的情况下，其行为类似于 minmax(min-content, max-content)，但具有额外的能力。）

max-content

表示占据网格轨道的网格项目的最大最大内容贡献。

min-content

表示占据网格轨道的网格项目的最大最小内容贡献。

fit-content( <length-percentage> )

表示公式 max(最小值, min(限制值, max-content))，其中 最小值 表示一个 auto 最小值（通常但不总是等于 min-content 最小值）， 限制值 是作为参数传递给 fit-content() 的轨道尺寸调整函数。这实质上是计算为 minmax(auto, max-content) 和 minmax(auto, 限制值) 中的较小者。

给定以下 grid-template-columns 声明：

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

创建了五条网格线：

在网格容器的起始边缘。
距离网格容器起始边缘 100px。
与前一条线的距离等于可用空间的一半（网格容器的宽度减去非弹性网格轨道的宽度）。
与前一条线的距离等于属于这两条线之间列的任何网格项目的最大尺寸。
与前一条线的距离至少与属于这两条线之间列的任何网格项目的最大最小尺寸一样大，但不超过可用空间的另一半。

如果非弹性尺寸（100px、max-content 和 min-content）的总和大于网格容器的宽度，则最终的网格线将与网格容器的起始边缘相距等于其总和的距离（两个 1fr 尺寸都解析为 0）。如果总和小于网格容器的宽度，则最终的网格线将恰好位于网格容器的结束边缘。通常情况下，只要<flex> 值中至少有一个网格轨道尺寸，这一点就成立。

有效的网格轨道定义的其他示例：

/* 有效轨道定义的示例 */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px);

注意：网格的大小并非纯粹是轨道大小的总和，因为 row-gap、column-gap 以及 justify-content、align-content 可以在轨道之间添加额外的空间。

7.2.2. 命名网格线：[<custom-ident>*] 语法

虽然网格线总是可以通过其数字索引来引用，但线名可以使网格放置属性更易于理解和维护。线名可以通过 grid-template-rows 和 grid-template-columns 属性显式分配，也可以通过 grid-template-areas 属性由命名网格区域隐式分配。

例如，以下代码为网格中的所有线赋予了有意义的名称。请注意，某些线有多个名称。

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

线名不能是 span 或 auto，即 <custom-ident> 在 <line-names> 产生式中不包括关键字 span 和 auto。

7.2.3. 重复行和列：repeat() 表示法

repeat() 表示法代表轨道列表的一个重复片段，允许以更紧凑的形式编写大量呈现重复模式的列或行。

此示例显示了编写相同网格定义的两种等效方法。两个声明都产生四个“主”列，每列宽 250px，并由 10px 的“间距”列包围。

grid-template-columns: 10px [col-start] 250px [col-end]
                        10px [col-start] 250px [col-end]
                        10px [col-start] 250px [col-end]
                        10px [col-start] 250px [col-end] 10px;
/* 与上面相同，只是更容易编写 */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;

7.2.3.1. repeat() 语法

repeat() 语法的通用形式大致如下：

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

第一个参数指定重复次数。第二个参数是一个轨道列表，该列表将重复指定的次数。但是，存在一些限制：

repeat() 表示法不能嵌套。
自动重复（auto-fill 或 auto-fit）不能与完全固有或弹性尺寸组合（参见语法）。

因此，repeat() 表示法的精确语法有几种形式：

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

<track-repeat> 变体可以表示任何 <track-size> 的重复，但仅限于固定次数的重复。
<auto-repeat> 变体可以自动重复以填充空间，但需要确切的轨道尺寸才能计算重复次数。它在轨道列表中只能出现一次，但同一个轨道列表也可以包含 <fixed-repeat>。

如果 repeat() 函数最终将两个 <line-names> 相邻放置，则名称列表将合并。例如，repeat(2, [a] 1fr [b]) 等效于 [a] 1fr [b a] 1fr [b]。

7.2.3.2. 填充式重复：auto-fill 和 auto-fit 重复

当重复次数指定为 auto-fill 时，如果网格容器在相关轴上具有确切的首选尺寸或最大尺寸，则重复次数是不会导致网格溢出其网格容器的内容框（考虑到间隙）的最大可能正整数；如果任何数量的重复都会溢出，则重复 1 次。否则，如果网格容器在相关轴上具有确切的最小尺寸，则重复次数是满足该最小要求的最小可能正整数。否则，指定的轨道列表仅重复一次。

为此，如果其最大轨道尺寸调整函数是确切的，则每个轨道都按其最大轨道尺寸调整函数处理，否则，如果其最小轨道尺寸调整函数是确切的，则按其最小轨道尺寸调整函数处理。如果两者都是确切的，则将最大轨道尺寸调整函数向下取整至最小轨道尺寸调整函数。如果两者都不是确切的，则重复次数为一。

例如，以下代码将创建尽可能多的 25 个字符宽的列以适应窗口宽度。如果有任何剩余空间，它将在这些 25 字符宽的列之间分配。

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

auto-fit 关键字的行为与 auto-fill 相同，只是在网格项目放置之后，任何空的重复轨道都会折叠。空轨道是指没有流内网格项目放置其中或跨越它的轨道。（如果所有轨道都为空，这可能导致所有轨道都被折叠。）

折叠的网格轨道被视为具有固定的 0px 轨道尺寸调整函数，并且其两侧的间距——包括通过分布式对齐分配的任何空间——都会折叠。

为了找到自动重复轨道的数量，用户代理 (UA) 必须将轨道大小向下取整到一个 UA 指定的值以避免除以零。建议此下限为 1px。

7.2.3.3. repeat() 的插值/组合

如果两个 repeat() 表示法具有相同的第一个参数（重复计数）和其第二个参数（轨道列表）中相同数量的轨道，它们通过组合其计算轨道列表的每个组件（按计算值，就像组合顶级轨道列表一样）进行组合。否则，它们离散地组合。

7.2.4. 弹性长度：fr 单位

弹性长度或<flex> 是一个带有fr 单位的维度，它表示剩余空间在网格容器中的一部分。用 fr 单位确定大小的轨道称为弹性轨道，因为它们会响应剩余空间而伸缩，类似于具有零基础大小的弹性项目在弹性容器中填充空间的方式。

剩余空间的分配发生在所有非弹性轨道尺寸调整函数达到其最大值之后。此类行或列的总大小从可用空间中减去，得到剩余空间，然后根据其弹性因子按比例在弹性尺寸的行和列之间分配。

每列或每行的剩余空间份额可以计算为该列或行的 <flex> * <剩余空间> / <所有弹性因子的总和>。

0fr 和 1fr 之间的 <flex> 值具有某种特殊行为：当弹性因子的总和小于 1 时，它们将占据少于 100% 的剩余空间。

轨道的 <flex> 值实际上是对剩余空间某个比例的请求，其中 1fr 表示“100% 的剩余空间”；然后，如果该轴上的轨道总共请求超过 100%，则会重新平衡这些请求以保持相同的比例，但恰好用完 100% 的空间。但是，如果轨道请求少于总数量（例如三个轨道各为 .25fr）那么它们每个都将精确获得其请求的数量（每个轨道获得 25% 的剩余空间，最后 25% 未填充）。有关如何分配剩余空间的确切详细信息，请参见 § 11.7 扩展弹性轨道。

当 fr 值接近零时（这意味着轨道不需要任何剩余空间），需要此模式以实现连续行为。如果没有此模式，1fr 轨道将占据所有剩余空间；但 0.1fr 轨道和 0.01fr 轨道等也是如此，直到最终该值小到足以向下溢出为零轨道突然不占据任何剩余空间。有了这种行为，当轨道的弹性因子缩小到 1fr 以下时，轨道反而会逐渐占据更少的剩余空间，平稳地过渡到在零时不占据任何剩余空间。

除非特别需要这种“部分填充”行为，否则作者应坚持使用 ≥ 1 的值；例如，使用 1fr 和 2fr 通常比使用 .33fr 和 .67fr 更好，因为如果添加或删除轨道，它们更有可能按预期运行。

当可用空间无限时（当网格容器的宽度或高度为不确定时发生），弹性尺寸的网格轨道会根据其内容调整大小，同时保持各自的比例。每个弹性尺寸网格轨道的使用大小是通过确定每个弹性尺寸网格轨道的max-content大小，然后将该大小除以各自的弹性因子来计算“假设的 1fr 大小”。这些值中的最大值用作已解析的 1fr 长度（弹性分数），然后将其乘以每个网格轨道的弹性因子以确定其最终大小。

注意：<flex> 值不是<length> （它们也与<length>不兼容，不像某些<percentage>值），因此它们不能在 calc() 表达式中表示或与其他单位类型组合。

7.2.5. 轨道列表的计算值

计算轨道列表是一个在线名集和轨道区段之间交替的列表，其第一个和最后一个项目是线名集。

线名集是一个（可能为空的）表示线名的标识符集合。

轨道区段是以下任一项：

一个 minmax() 函数表示法，表示单个轨道的大小，其中每个 <length-percentage> 都已计算（一个计算轨道大小）
一个 repeat() 函数表示法，表示一个重复的轨道列表区段，其<integer>已计算，其<track-list>表示为一个计算轨道列表（一个计算重复表示法）

7.2.6. 轨道列表的解析值

grid-template-rows 和 grid-template-columns 属性是解析值特殊情况属性。[CSSOM]

当元素生成网格容器框时，其grid-template-rows 或 grid-template-columns 属性的解析值是使用值，序列化时具有以下特征：

每个轨道都单独列出，无论是隐式还是显式创建的，都不使用 repeat() 表示法。
每个轨道大小都以像素为单位的长度给出，无论尺寸调整函数如何。
相邻的线名折叠成单个括号括起来的集合。

上述列表的第一点意味着隐式轨道作为 grid-template-rows 等的一部分进行序列化，尽管作者实际上无法在这些属性中指定隐式轨道大小！因此 grid-template-rows 和 grid-template-columns 值可能无法正确往返：

const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// 像这样的代码应该是一个无操作，
// 但如果存在任何隐式行，
// 这会将其转换为显式行，
// 可能会改变网格项目的定位方式
// 并改变网格的整体大小！

这是一个早期实现的意外特性，在没有经过深思熟虑的情况下泄漏到了后续的实现中。我们打算从规范中删除它，但要等到我们定义了用于获取有关隐式轨道信息的 CSSOM API 之后，因为目前这是获取该信息的唯一方法，并且许多页面依赖于此。

否则，（例如，当元素具有 display: none 或不是网格容器时）解析值就是计算值。

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

注意：通常，解析值是计算值，除了一小部分旧版 2.1 属性。但是，与此模块的早期实现的兼容性要求我们将 grid-template-rows 和 grid-template-columns 定义为返回使用值。

CSS 工作组正在考虑是否也为网格放置属性返回使用值，并正在征求反馈，尤其是来自实现者的反馈。参见讨论。

7.3. 命名区域：grid-template-areas 属性

名称：	grid-template-areas
值：	none \| <string>+
初始值：	none
适用于：	网格容器
继承：	否
百分比：	不适用
计算值：	关键字 none 或字符串值列表
规范顺序：	按语法
动画类型：	离散

此属性指定命名网格区域，这些区域不与任何特定的网格项关联，但可以从网格放置属性中引用。 grid-template-areas 属性的语法还提供了网格结构的可视化，使网格容器的整体布局更易于理解。

值具有以下含义：

none

表示此属性未定义命名网格区域，同样也没有定义显式网格轨道（尽管显式网格轨道仍可由 grid-template-columns 或 grid-template-rows 创建）。

注意：在没有显式网格的情况下，任何行/列都将隐式生成，其大小将由 grid-auto-rows 和 grid-auto-columns 属性确定。

<string>+

为 grid-template-areas 属性列出的每个单独字符串创建一行，并为字符串中的每个单元格创建一列，解析方式如下：

使用最长匹配语义将字符串标记化为以下标记列表：

标识符代码点序列，表示一个命名单元格标记，其名称由其代码点组成。
一个或多个 "." (U+002E FULL STOP) 的序列，表示一个空单元格标记。
空白字符序列，表示无内容（不生成标记）。
任何其他字符的序列，表示一个无效标记。

注意：这些规则可以生成不匹配 <ident> 语法的单元格名称，例如 "1st 2nd 3rd"，在其他属性中按名称引用这些区域时需要转义，例如 grid-row: \31st; 用于引用名为 1st 的区域。

空单元格标记表示网格容器中的一个未命名区域。
命名单元格标记创建一个具有相同名称的命名网格区域。行内和行间的多个命名单元格标记创建一个跨越相应网格单元格的单个命名网格区域。
无效标记是一个语法错误，并使声明无效。

所有字符串必须定义相同数量的单元格标记（命名单元格标记和/或空单元格标记），并且至少有一个单元格标记，否则声明无效。如果一个命名网格区域跨越多个网格单元格，但这些单元格未形成单个填充的矩形，则声明无效。

注意：此模块的未来版本可能允许非矩形或不连续区域。

在此示例中，grid-template-areas 属性用于创建页面布局，其中为页眉内容 (head)、导航内容 (nav)、页脚内容 (foot) 和主要内容 (main) 定义了区域。因此，模板创建了三行两列，包含四个命名网格区域。 head 区域跨越网格的两列和第一行。

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

7.3.1. 模板字符串的序列化

当序列化grid-template-areas 的 <string> 值的指定值或计算值时，每个空单元格标记序列化为单个 "." (U+002E FULL STOP)，连续的单元格标记由单个空格 (U+0020 SPACE) 分隔，所有其他空白字符均被省略。

7.3.2. 隐式分配的行名称

grid-template-areas 属性从模板中的命名网格区域生成隐式分配的行名称。对于每个命名网格区域 foo，会创建四个隐式分配的行名称：两个名为 foo-start，命名命名网格区域的行开始线和列开始线，两个名为 foo-end，命名命名网格区域的行结束线和列结束线。

这些隐式分配的行名称的行为与任何其他行名称一样，只是它们不会出现在 grid-template-rows/grid-template-columns 的值中。即使定义了具有相同名称的显式分配的行名称，隐式分配的行名称也只是更多具有相同名称的行。

7.3.3. 隐式命名区域

由于命名网格区域由其生成的隐式分配的行名称引用，显式添加相同形式的命名行 (foo-start/foo-end) 有效地创建了一个命名网格区域。此类隐式命名区域不会出现在 grid-template-areas 的值中，但仍可由网格放置属性引用。

7.4. 显式网格简写：grid-template 属性

名称：	grid-template
值：	none \| [ <'grid-template-rows'> / <'grid-template-columns'> ] \| [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
初始值：	none
适用于：	网格容器
继承：	参见各个属性
百分比：	参见各个属性
计算值：	参见各个属性
动画类型：	参见各个属性
规范顺序：	按语法

grid-template 属性是用于在单个声明中设置 grid-template-columns、grid-template-rows 和 grid-template-areas 的简写属性。它有几种不同的语法形式：

none

将所有三个属性设置为其初始值 (none)。

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

分别将 grid-template-rows 和 grid-template-columns 设置为指定值，并将 grid-template-areas 设置为 none。

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

等效于

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

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

将 grid-template-areas 设置为列出的字符串。
将 grid-template-rows 设置为每个字符串后面的 <track-size> （对于任何缺失的大小，填充 auto），并在每个大小之前/之后拼接定义的命名行。
将 grid-template-columns 设置为斜杠后指定的轨道列表（如果未指定，则为 none）。

此语法允许作者将其轨道名称和大小与其各自的网格区域内联对齐。

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

等效于

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

并创建以下网格：

上述声明创建的网格。（“a/b-start/end” 名称由命名网格区域隐式分配。）

注意：请注意，这些轨道列表中不允许使用 repeat() 函数，因为轨道旨在与 “ASCII 艺术” 中的行/列一一对应地在视觉上对齐。

注意：grid 简写接受相同的语法，但也会将隐式网格属性重置为其初始值。因此，除非作者希望这些属性分别级联，否则建议使用 grid 而不是 grid-template。

7.5. 隐式网格

grid-template-rows、grid-template-columns 和 grid-template-areas 属性定义了构成显式网格的固定数量的轨道。当网格项被放置在这些边界之外时，网格容器通过向网格添加隐式网格线来生成隐式网格轨道。这些线与显式网格一起构成隐式网格。 grid-auto-rows 和 grid-auto-columns 属性确定这些隐式网格轨道的大小，以及由 grid-template-areas 创建但未由 grid-template-rows 或 grid-template-columns 显式确定大小的任何显式网格轨道。

grid-auto-flow 属性控制没有显式位置的网格项的自动放置。一旦显式网格被填满（或者如果没有显式网格），自动放置也将导致生成隐式网格轨道。

grid 简写属性可以在单个声明中设置隐式网格属性（grid-auto-flow、grid-auto-rows 和 grid-auto-columns）以及显式网格属性。

7.6. 隐式轨道大小：grid-auto-rows 和 grid-auto-columns 属性

名称：	grid-auto-columns，grid-auto-rows
值：	<track-size>+
初始值：	auto
适用于：	网格容器
继承：	否
百分比：	参见轨道大小调整
计算值：	参见轨道大小调整
规范顺序：	按语法
动画类型：	如果列表长度匹配，则按每个项目的计算值类型；否则为离散

grid-auto-columns 和 grid-auto-rows 属性指定未由 grid-template-rows 或 grid-template-columns 分配大小的轨道的大小。如果给定了多个轨道大小，则根据需要重复该模式以找到受影响轨道的大小。最后一个显式确定大小的轨道之后的第一个轨道接收第一个指定的大小，依此类推向前；显式网格之前的最后一个隐式网格轨道接收最后一个指定的大小，依此类推向后。

注意：如果网格项被放置到未由 grid-template-rows/grid-template-columns 和/或 grid-template-areas 显式声明的行或列中，则会创建隐式网格轨道来容纳它。这可能是通过显式地将其放置到超出范围的行或列中，或者通过自动放置算法创建额外的行或列来实现的。

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

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

一个 2×2 网格，第一行第一列有一个显式的 20px×20px 网格单元格，以及由于为容纳其他网格项而生成的隐式 40px 列和行而产生的三个附加单元格。

7.7. 自动放置：grid-auto-flow 属性

名称：	grid-auto-flow
值：	[ row \| column ] \|\| dense
初始值：	row
适用于：	网格容器
继承：	否
百分比：	不适用
计算值：	指定的关键字
规范顺序：	按语法
动画类型：	离散

未显式放置的网格项将由自动放置算法自动放置到网格容器中的未占用空间。 grid-auto-flow 控制自动放置算法的工作方式，精确指定自动放置的项如何流入网格。有关自动放置算法如何精确工作的详细信息，请参见§ 8.5 网格项放置算法。

row: 自动放置算法通过依次填充每一行来放置项目，并在必要时添加新行。如果未提供 row 或 column，则假定为 row。
column: 自动放置算法通过依次填充每一列来放置项目，并在必要时添加新列。
dense: 如果指定，自动放置算法将使用“密集”打包算法，该算法会尝试在稍后出现较小项目时填充网格中较早的空洞。当这样做可以填充较大项目留下的空洞时，这可能会导致项目出现乱序。
如果省略，则使用“稀疏”算法，其中放置算法在放置项目时仅在网格中“向前”移动，从不回溯以填充空洞。这可确保所有自动放置的项目都“按顺序”出现，即使这会留下本可以由后续项目填充的空洞。

注意：此模块的未来级别预计会添加一个值，该值会将自动定位的项目流式传输到单个“默认”单元格中。

自动放置按顺序修改的文档顺序处理网格项。

在以下示例中，有三列，每列都根据其内容自动调整大小。没有显式定义行。 grid-auto-flow 属性为 row，它指示网格从第一行开始在其三列中搜索，然后是下一行，根据需要添加行，直到找到足够的空间来容纳任何自动放置的网格项的位置。

使用自动放置排列的表单。

<style type="text/css">
form {
    display: grid;
    /* 定义三列，全部根据内容调整大小，
        并命名相应的行。 */
    grid-template-columns: [labels] auto [controls] auto [oversized] auto;
    grid-auto-flow: row dense;
}
form > label {
    /* 将所有标签放置在 "labels" 列中，并
        自动查找下一个可用行。 */
    grid-column: labels;
    grid-row: auto;
}
form > input, form > select {
    /* 将所有控件放置在 "controls" 列中，并
        自动查找下一个可用行。 */
    grid-column: controls;
    grid-row: auto;
}

#department-block {
    /* 在 "oversized" 列中自动放置此项目，
        放置在跨越三行的区域不会与
        其他显式放置的项目或区域
        或在此区域之前自动放置的任何项目重叠的第一行。 */
    grid-column: oversized;
    grid-row: span 3;
}

/* 将表单的所有按钮放置
    在显式定义的网格区域中。 */
#buttons {
    grid-row: auto;

    /* 确保按钮区域在内联轴上
        跨越整个网格元素。 */
    grid-column: 1 / -1;
    text-align: end;
}
</style>
<form>
    <label for="firstname">名字：</label>
    <input type="text" id="firstname" name="firstname">
    <label for="lastname">姓氏：</label>
    <input type="text" id="lastname" name="lastname">
    <label for="address">地址：</label>
    <input type="text" id="address" name="address">
    <label for="address2">地址 2：</label>
    <input type="text" id="address2" name="address2">
    <label for="city">城市：</label>
    <input type="text" id="city" name="city">
    <label for="state">州：</label>
    <select type="text" id="state" name="state">
    <option value="WA">华盛顿州</option>
    </select>
    <label for="zip">邮政编码：</label>
    <input type="text" id="zip" name="zip">

    <div id="department-block">
    <label for="department">部门：</label>
    <select id="department" name="department" multiple>
        <option value="finance">财务部</option>
        <option value="humanresources">人力资源部</option>
        <option value="marketing">市场部</option>
    </select>
    </div>

    <div id="buttons">
    <button id="cancel">取消</button>
    <button id="back">返回</button>
    <button id="next">下一步</button>
    </div>
</form>

7.8. 网格定义简写：grid 属性

名称：	grid
值：	<'grid-template'> \| <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? \| [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
初始值：	none
适用于：	网格容器
继承：	参见各个属性
百分比：	参见各个属性
计算值：	参见各个属性
动画类型：	参见各个属性
规范顺序：	按语法

grid 属性是一个简写属性，它在单个声明中设置所有显式网格属性（grid-template-rows、grid-template-columns 和 grid-template-areas）和所有隐式网格属性（grid-auto-rows、grid-auto-columns 和 grid-auto-flow）。（它不会重置间距属性。）

其语法与 grid-template 匹配，外加一个用于定义自动流网格的附加语法形式：

<'grid-template'>: 将 grid-template 的完整属性设置为与 grid-template 相同，并将 grid-auto-* 的完整属性设置为其初始值。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>: 通过显式设置一个轴中的轨道来设置自动流（将 grid-template-rows 或 grid-template-columns 设置为指定值，并将另一个设置为 none），并指定如何在另一个轴中自动重复轨道（将 grid-auto-rows 或 grid-auto-columns 设置为指定值，并将另一个设置为 auto）。grid-auto-flow 也相应地设置为 row 或 column，如果指定了 dense，则包含 dense。
所有其他 grid 子属性将重置为其初始值。

注意：请注意，您只能在单个 grid 声明中指定显式或隐式网格属性。您未指定的子属性将设置为其初始值，这对于简写属性是正常的。

除了接受用于设置显式网格的 grid-template 简写语法外， grid 简写还可以轻松设置自动格式化网格的参数。例如，grid: auto-flow 1fr / 100px; 等效于

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

类似地，grid: none / auto-flow 1fr 等效于

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

序列化时，如果所有 grid-auto-* 完整属性都具有其初始值，则使用 grid-template 语法。

8. 放置网格项

每个网格项都与一个网格区域相关联，该网格项占据一个由相邻网格单元组成的矩形集合。此网格区域定义了网格项的包含块，自对齐属性（justify-self 和 align-self）在此包含块内确定其实际位置。网格项占据的单元格也会影响网格行和列的尺寸调整，这在 § 11 网格布局算法中定义。

网格项的网格区域在网格中的位置由其放置定义，它由网格位置和网格跨度组成：

网格位置: 网格项在每个轴上网格中的位置。网格位置可以是确定的（显式指定）或自动的（由自动放置确定）。
网格跨度: 网格项在每个轴上占据多少个网格轨道。在级别 1 中，网格项的网格跨度始终是确定的，如果无法为该轴确定，则默认为每个轴 1。

网格放置属性——完整属性 grid-row-start、grid-row-end、grid-column-start、grid-column-end，以及它们的简写属性 grid-row、grid-column 和 grid-area——允许作者通过提供以下六个信息中的任何一个（或不提供）来指定网格项的放置：

	行	列
`开始`	行开始线	列开始线
`结束`	行结束线	列结束线
`跨度`	行跨度	列跨度

在给定维度中，开始、结束和跨度中任意两个的确定值意味着第三个的确定值。

下表总结了网格位置或跨度是确定的或自动的的条件：

	位置	跨度
确定的	至少一条指定的线	显式、隐式或默认跨度。
自动的	没有显式指定的线	不适用

8.1. 网格放置的常见模式

本节内容仅供参考。

网格放置属性的完整属性被组织成三个简写属性：

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

8.1.1. 命名区域

通过在 grid-area 中指定区域名称，可以将项目放置到命名网格区域（例如由 grid-template-areas 中的模板生成的区域）：

article {
    grid-area: main;
    /* 将项目放置到名为 "main" 的区域。 */
}

项目也可以部分与命名网格区域对齐，其他边缘与某个其他线对齐：

.one {
    grid-row-start: main;
    /* 将行开始边缘与名为 "main" 的命名区域的开始边缘对齐。 */
}

8.1.2. 数字索引和跨度

网格项可以通过数字进行定位和调整大小，这对于脚本驱动的布局特别有用：

.two {
    grid-row: 2;    /* 将项目放置在第二行。 */
    grid-column: 3; /* 将项目放置在第三列。 */
    /* 等效于 grid-area: 2 / 3; */
}

默认情况下，网格项的跨度为 1。可以显式指定不同的跨度：

.three {
    grid-row: 2 / span 5;
    /* 从第二行开始，
        向下跨越 5 行（在第七行结束）。 */
}

.four {
    grid-row: span 5 / 7;
    /* 在第七行结束，
        向上跨越 5 行（从第二行开始）。 */
}

注意：请注意，网格索引是书写模式相关的。例如，在像阿拉伯语这样的从右到左的语言中，第一列是最右边的列。

8.1.3. 命名线和跨度

除了按数字计数线之外，还可以通过其线名称引用线：

.five {
    grid-column: first / middle;
    /* 从名为 "first" 的线跨越到名为 "middle" 的线。 */
}

注意：请注意，如果命名网格区域与线名称同名，放置算法将优先使用命名网格区域的线。

如果有多条同名的线，它们有效地建立了一个命名的网格线集，可以通过按名称筛选放置来专门索引：

.six {
    grid-row: text 5 / text 7;
    /* 在第 5 条和第 7 条名为 "text" 的线之间跨越。 */
    grid-row: text 5 / span text 2;
    /* 与上面相同 - 从第 5 条名为 "text" 的线开始，
        然后跨越另外两条 "text" 线，到达第 7 条。 */
}

8.1.4. 自动放置

网格项可以自动放置到下一个可用的空网格单元格中，如果没有剩余空间，则会扩展网格。

.eight {
    grid-area: auto; /* 初始值 */
}

例如，这可以用于在目录网站上以网格模式列出许多促销商品。

如果项目应占用多个单元格，则可以将自动放置与显式跨度结合使用：

.nine {
    grid-area: span 2 / span 3;
    /* 自动放置的项目，覆盖两行三列。 */
}

自动放置算法是跨行搜索并添加行，还是跨列搜索并添加列，由 grid-auto-flow 属性控制。

注意：默认情况下，自动放置算法会线性地遍历网格而不回溯；如果它必须跳过一些空格来放置一个较大的项目，它将不会返回来填充这些空格。要更改此行为，请在 grid-auto-flow 中指定 dense 关键字。

“能力越大，责任越大。”

网格放置属性的功能允许内容在网格内自由排列和重新排序，这样视觉呈现可以与基础文档源顺序在很大程度上分离。这些功能为作者提供了极大的自由度，可以针对不同的设备和呈现模式定制渲染，例如使用媒体查询。然而，它们不能替代正确的源顺序。

正确的源顺序对于语音、顺序导航（例如键盘导航）以及非 CSS 用户代理（例如搜索引擎、触觉浏览器等）非常重要。网格放置仅影响视觉呈现！这允许作者针对非 CSS/非视觉交互模式优化文档源，并使用网格放置技术进一步操作视觉呈现，从而保持源顺序不变。

8.3. 基于线的放置：grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性

名称：	grid-row-start、grid-column-start、 grid-row-end、grid-column-end
值：	<grid-line>
初始值：	auto
适用于：	网格项和其包含块是网格容器的绝对定位框
继承：	否
百分比：	不适用
计算值：	指定的关键字、标识符和/或整数
规范顺序：	按语法
动画类型：	离散

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

grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性通过为其网格放置贡献一条线、一个跨度或什么都不贡献（自动），从而确定网格项在网格中的大小和位置，从而指定其网格区域的内联开始、块开始、内联结束和块结束边缘。

值具有以下含义：

<custom-ident>

首先尝试将网格区域的边缘与命名网格区域匹配：如果存在一条网格线，其线名称为 <custom-ident>-start（对于 grid-*-start）/ <custom-ident>-end（对于 grid-*-end），则将第一条这样的线贡献给网格项的放置。

注意：命名网格区域会自动生成这种形式的隐式分配的线名称，因此指定 grid-row-start: foo 将选择该命名网格区域的开始边缘（除非在此之前显式指定了另一条名为 foo-start 的线）。

否则，将其视为已与 <custom-ident> 一起指定了整数 1。

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

将第 N 条网格线贡献给网格项的放置。如果给定负整数，则从显式网格的结束边缘开始反向计数。

如果名称以 <custom-ident> 的形式给出，则仅计算具有该名称的线。如果具有该名称的线不足，则假定所有隐式网格线都具有该名称以查找此位置。

<integer> 值为零会使声明无效。

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

为网格项的放置贡献一个网格跨度，使得网格项的网格区域的相应边缘距离其相对边缘 N 条线，方向相应。例如，grid-column-end: span 2 表示从 grid-column-start 线开始，向结束方向的第二条网格线。

如果名称以 <custom-ident> 的形式给出，则仅计算具有该名称的线。如果具有该名称的线不足，则假定显式网格一侧（与搜索方向对应）的所有隐式网格线都具有该名称以计算此跨度。

例如，给定以下声明：

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

网格容器有一个显式网格，包含两条网格线，编号为 1 和 2。网格项的列结束边缘指定在第 4 条线，因此在隐式网格的结束侧生成了两条线。

其列开始边缘必须是它能找到的在该位置之前的第一个 "foo" 线。然而，网格中没有 "foo" 线，因此唯一的可能性是隐式网格中的一条线。第 3 条线不是候选线，因为它位于显式网格的结束侧，而 grid-column-start 跨度强制它向开始方向搜索。因此，唯一的选择是让隐式网格在显式网格的开始侧生成一条线。

结果示意图。

如果省略 <integer>，则默认为 1。负整数或零无效。

auto

该属性对网格项的放置没有贡献，表示自动放置或默认跨度为 1。（参见上面的 § 8 放置网格项。）

在上述所有产生式中， <custom-ident> 还排除了关键字 span 和 auto。

给定一个单行 8 列的网格和以下 9 条命名线：

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

以下声明将网格项放置在索引指示的线之间：

grid-column-start: 4; grid-column-end: auto;
/* 第 4 条线到第 5 条线 */

grid-column-start: auto; grid-column-end: 6;
/* 第 5 条线到第 6 条线 */

grid-column-start: C; grid-column-end: C -1;
/* 第 3 条线到第 9 条线 */

grid-column-start: C; grid-column-end: span C;
/* 第 3 条线到第 6 条线 */

grid-column-start: span C; grid-column-end: C -1;
/* 第 6 条线到第 9 条线 */

grid-column-start: span C; grid-column-end: span C;
/* 错误：结束跨度被忽略，并且自动放置的
    项目不能跨越到命名线。
    等效于 ''grid-column: span 1;''。 */

grid-column-start: 5; grid-column-end: C -1;
/* 第 5 条线到第 9 条线 */

grid-column-start: 5; grid-column-end: span C;
/* 第 5 条线到第 6 条线 */

grid-column-start: 8; grid-column-end: 8;
/* 错误：第 8 条线到第 9 条线 */

grid-column-start: B 2; grid-column-end: span 1;
/* 第 5 条线到第 6 条线 */

8.3.1. 网格放置冲突处理

如果网格项的放置包含两条线，并且开始线比结束线更靠后，则交换这两条线。如果开始线等于结束线，则移除结束线。

如果放置包含两个跨度，则移除由结束网格放置属性贡献的那个。

如果放置仅包含命名线的跨度，则将其替换为跨度 1。

8.4. 放置简写：grid-column、grid-row 和 grid-area 属性

名称：	grid-row、grid-column
值：	<grid-line> [ / <grid-line> ]?
初始值：	auto
适用于：	网格项和其包含块是网格容器的绝对定位框
继承：	否
百分比：	不适用
计算值：	参见各个属性
动画类型：	离散
规范顺序：	按语法

grid-row 和 grid-column 属性分别是 grid-row-start/grid-row-end 和 grid-column-start/grid-column-end 的简写属性。

如果指定了两个 <grid-line> 值，则 grid-row-start/grid-column-start 完整属性设置为斜杠前的值，而 grid-row-end/grid-column-end 完整属性设置为斜杠后的值。

当省略第二个值时，如果第一个值是 <custom-ident>，则 grid-row-end/grid-column-end 完整属性也设置为该 <custom-ident>；否则，它设置为 auto。

名称：	grid-area
值：	<grid-line> [ / <grid-line> ]{0,3}
初始值：	auto
适用于：	网格项和其包含块是网格容器的绝对定位框
继承：	否
百分比：	不适用
计算值：	参见各个属性
动画类型：	离散
规范顺序：	按语法

grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写。

如果指定了四个 <grid-line> 值，则 grid-row-start 设置为第一个值，grid-column-start 设置为第二个值，grid-row-end 设置为第三个值，并且 grid-column-end 设置为第四个值。

当省略 grid-column-end 时，如果 grid-column-start 是 <custom-ident>，则 grid-column-end 设置为该 <custom-ident>；否则，它设置为 auto。

当省略 grid-row-end 时，如果 grid-row-start 是 <custom-ident>，则 grid-row-end 设置为该 <custom-ident>；否则，它设置为 auto。

当省略 grid-column-start 时，如果 grid-row-start 是 <custom-ident>，则所有四个完整属性都设置为该值。否则，它设置为 auto。

注意：此简写的解析顺序是 row-start/column-start/row-end/column-end，对于 LTR 页面，这是逆时针方向，与使用物理方向的相关 4 边属性（如 margin）的方向相反。

8.5. 网格项放置算法

以下网格项放置算法将网格项的自动位置解析为确定位置，确保每个网格项都有一个明确定义的网格区域以供布局。（网格跨度不需要特殊解析；如果未显式指定，则默认为 1。）

注意：如果显式网格中没有空间放置自动定位的网格项，此算法可能会导致在隐式网格中创建新的行或列。

每个网格单元格（在显式和隐式网格中）可以是已占用或未占用。如果单元格被具有确定网格位置的网格项的网格区域覆盖，则该单元格为已占用；否则，单元格为未占用。在此算法执行期间，单元格的已占用/未占用状态可能会发生变化。

为清楚起见，此算法的编写假设 grid-auto-flow 已指定为 row。如果将其设置为 column，则在此算法中交换所有提及的行和列、内联和块等。

注意：自动放置算法处理网格项时，遵循的是顺序修改后的文档顺序，而不是其原始文档顺序。

生成匿名网格项，如 § 6 网格项中所述。（匿名网格项始终是自动放置的，因为它们的框不能指定任何网格放置属性。）
定位所有非自动定位的项。
处理锁定到给定行的项。

对于每个具有确定行位置的网格项（即 grid-row-start 和 grid-row-end 属性定义了一个确定网格位置），按照顺序修改后的文档顺序：

“稀疏”打包（默认行为）

将其放置的列起始线设置为最早（最小正索引）的线索引，以确保此项的网格区域不会与任何已占用的网格单元格重叠，并且位于此步骤中先前放置在此行中的任何网格项之后。

“密集”打包（指定了 dense）

将其放置的列起始线设置为最早（最小正索引）的线索引，以确保此项的网格区域不会与任何已占用的网格单元格重叠。
确定隐式网格中的列。

在隐式网格中创建列：
1. 从显式网格的列开始。
2. 在所有具有确定列位置的项（显式定位的项、上一步中定位的项以及尚未定位但具有确定列的项）中，根据需要向隐式网格的开头和结尾添加列以容纳这些项。
3. 如果所有没有确定列位置的项中的最大列跨度大于隐式网格的宽度，则向隐式网格的末尾添加列以容纳该列跨度。
例如，在以下样式片段中：
```
#grid {
    display: grid;
    grid-template-columns: repeat(5, 100px);
    grid-auto-flow: row;
}
#grid-item {
    grid-column: 4 / span 3;
}
```
所需的列数为 6。显式网格提供了 5 列（来自 grid-template-columns），线号从 1 到 6，但是 #grid-item 的列位置意味着它在第 7 条线上结束，这需要在隐式网格的末尾添加一个额外的列。
定位剩余的网格项。

自动放置光标定义了网格中当前的“插入点”，指定为一对行和列网格线。最初，自动放置光标设置为隐式网格中最开始的行和列线。

正在使用的 grid-auto-flow 值决定了如何定位项：
“稀疏”打包（默认行为）
对于每个尚未通过先前步骤定位的网格项，按照顺序修改后的文档顺序：
如果项具有确定的列位置：
将光标的列位置设置为网格项的列起始线。如果这小于光标的先前列位置，则将行位置增加 1。

增加光标的行位置，直到找到一个值，使得网格项不与任何已占用的网格单元格重叠（根据需要在隐式网格中创建新行）。

将项的行起始线设置为光标的行位置，并根据其从该位置的跨度设置项的行结束线。
如果项在两个轴上都具有自动网格位置：
增加自动放置光标的列位置，直到此项的网格区域不与任何已占用的网格单元格重叠，或者光标的列位置，加上项的列跨度，超过此算法前面确定的隐式网格中的列数。

如果在上一步中找到了不重叠的位置，则将项的行起始线和列起始线设置为光标的位置。否则，增加自动放置光标的行位置（根据需要在隐式网格中创建新行），将其列位置设置为隐式网格中最开始的列线，并返回上一步。
“密集”打包（指定了 dense）
对于每个尚未通过先前步骤定位的网格项，按照顺序修改后的文档顺序：
如果项具有确定的列位置：
将光标的行位置设置为隐式网格中最开始的行线。将光标的列位置设置为网格项的列起始线。

增加自动放置光标的行位置，直到找到一个值，使得网格项不与任何已占用的网格单元格重叠（根据需要在隐式网格中创建新行）。

将项的行起始线索引设置为光标的行位置。（也隐式地根据其跨度设置项的行结束线。）
如果项在两个轴上都具有自动网格位置：
将光标的行和列位置设置为隐式网格中最开始的行和列线。

增加自动放置光标的列位置，直到此项的网格区域不与任何已占用的网格单元格重叠，或者光标的列位置，加上项的列跨度，超过此算法前面确定的隐式网格中的列数。

如果在上一步中找到了不重叠的位置，则将项的行起始线和列起始线设置为光标的位置。否则，增加自动放置光标的行位置（根据需要在隐式网格中创建新行），将其列位置重置为隐式网格中最开始的列线，并返回上一步。

9. 绝对定位

9.1. 以网格容器作为包含块

如果绝对定位元素的包含块是由网格容器生成的，则包含块对应于由其网格放置属性确定的网格区域。偏移属性（top/right/bottom/left）然后像往常一样指示从此包含块的相应边缘向内的偏移量。

注意：虽然将元素绝对定位到网格容器确实允许它与该容器的网格线对齐，但此类元素不占用空间或以其他方式参与网格的布局。

.grid {
    grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
    /* 4 个等高行填充网格容器，
        4 列，每列 ''10rem'' */
    justify-content: center;
    /* 在网格容器内水平居中网格 */
    position: relative;
    /* 建立绝对定位包含块 */
}

.abspos {
    grid-row-start: 1;     /* 第 1 条网格行线 = 网格容器顶部 */
    grid-row-end: span 2;  /* 第 3 条网格行线 */
    grid-column-start: 3;  /* 第 3 条网格列线 */
    grid-column-end: auto; /* 右内边距边缘 */
    /* 包含块覆盖网格容器的右上象限 */

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

注意：网格和网格放置属性是流相对的，而偏移属性（left、right、top 和 bottom）是物理的，因此如果direction 或 writing-mode 属性发生变化，网格将转换以匹配，但偏移量不会。

对于网格放置属性，auto 值不是进行自动放置，而是为放置贡献一条特殊线，其位置是网格容器相应内边距边缘的位置（如果网格容器溢出，则为可滚动区域的内边距边缘）。这些线成为用于定位绝对定位项的增强网格的第一条和最后一条线（第 0 条和第 -0 条）。

注意：因此，默认情况下，绝对定位框的包含块将对应于网格容器的内边距边缘，就像它对块容器所做的那样。

绝对定位发生在网格及其流内内容布局之后，并且不影响任何网格轨道的大小调整，也不以任何方式影响网格的大小/配置。如果网格放置属性通过显式指定此类线或通过跨越现有隐式网格之外来引用不存在的线，则将其视为指定 auto （而不是创建新的隐式网格线）。

注意：请记住，隐式线假定具有所有线名称，因此即使未显式命名，引用的线也可能存在。

如果放置仅包含网格跨度，则将其替换为该轴中的两条 auto 线。（当一个轴中的两个网格放置属性最初都贡献了一个跨度，并且§ 8.3.1 网格放置冲突处理导致第二个跨度被忽略时，会发生这种情况。）

9.2. 以网格容器作为父元素

网格容器的绝对定位子元素是脱离文档流的，并且不是网格项，因此不影响其他项的放置或网格的大小调整。

网格容器的绝对定位子元素的静态位置 [CSS2] 的确定方式就好像它是网格区域中唯一的网格项，该网格区域的边缘与网格容器的内容边缘重合。

注意：请注意，此位置受子元素上 justify-self 和 align-self 值的影响，并且与大多数其他布局模型一样，绝对定位的子元素对其包含块的大小或其内容的布局没有影响。

10. 对齐和间距

在网格容器的网格轨道尺寸确定后，并且所有网格项的尺寸最终确定后，网格项可以在其网格区域内对齐。

margin 属性可以用于以类似于外边距在块布局中的方式对齐项目。网格项也遵循CSS Box Alignment Module [CSS-ALIGN-3] 中的盒模型对齐属性，这些属性允许在行和列中轻松地基于关键字对齐项目。

默认情况下，网格项会拉伸以填充其网格区域。但是，如果justify-self 或 align-self 计算的值不是 stretch 或者外边距是 auto，网格项将自动调整大小以适应其内容。

10.1. 间距：row-gap、 column-gap 和 gap 属性

row-gap 和 column-gap 属性（及其gap 简写属性），当在网格容器上指定时，定义网格行和网格列之间的间距。它们的语法在 CSS Box Alignment 3 § 8 盒间间距中定义。

这些属性的效果就好像受影响的网格线获得了厚度：两条网格线之间的网格轨道是代表它们的间距之间的空间。为了轨道尺寸调整的目的，每个间距被视为一个额外的、空的、固定大小的指定尺寸的轨道，该轨道由跨越其相应网格线的任何网格项跨越。

注意：由于justify-content/align-content，可能会在轨道之间添加额外的间距。参见 § 11.1 网格尺寸调整算法。此空间有效地增加了间距的大小。

如果网格在轨道之间分段，则必须抑制这些轨道之间的间距。请注意，即使在强制换行后，间距也会被抑制，与外边距不同。

间距仅出现在隐式网格的轨道之间；第一个轨道之前或最后一个轨道之后没有间距。（特别是，隐式网格的第一个/最后一个轨道与增强网格中的“auto”线之间没有间距。）

当折叠轨道的间距折叠时，它们完全重合——两个间距重叠，以便它们的开始和结束边缘重合。如果折叠轨道的一侧没有间距（例如，如果它是隐式网格的第一个或最后一个轨道），那么折叠其间距会导致折叠轨道的任何一“侧”都没有间距。

10.2. 使用 auto 外边距对齐

网格项上的 Auto 外边距的效果与块布局中的 auto 外边距非常相似：

在计算网格轨道大小时，auto 外边距被视为 0。
正如为块布局的内联轴所定义的（参见 CSS2§10.3.3），任一轴上的 auto 外边距在通过盒模型对齐属性进行对齐之前吸收正的可用空间，从而禁用该轴上任何自对齐属性的效果。
溢出的网格项将其 auto 外边距解析为零，并根据其盒模型对齐属性指定的方式溢出。

10.3. 内联轴对齐：justify-self 和 justify-items 属性

网格项可以通过在网格项上使用 justify-self 属性或在网格容器上使用 justify-items 属性，在内联维度上对齐，如 [CSS-ALIGN-3] 中所定义。

例如，对于英文文档，内联轴是水平的，因此 justify-* 属性水平对齐网格项。

如果在其轴向尺寸取决于固有尺寸轨道的尺寸的网格项上指定了基线对齐（因此其尺寸取决于项目的尺寸和基线对齐，从而产生循环依赖），则该项目不参与基线对齐，而是使用其回退对齐，就好像最初指定了该对齐方式一样。为此，当网格容器在相关轴上具有不确定尺寸时，<flex> 轨道尺寸计为“固有尺寸”。

注意：是否使用回退对齐在布局过程中不会改变：如果存在循环，它就存在。

10.4. 块轴对齐：align-self 和 align-items 属性

网格项也可以通过在网格项上使用 align-self 属性或在网格容器上使用 align-items 属性，在块维度（垂直于内联维度）上对齐，如 [CSS-ALIGN-3] 中所定义。

10.5. 对齐网格：justify-content 和 align-content 属性

如果网格的外部边缘与网格容器的内容边缘不对应（例如，如果没有列是弹性尺寸的），则网格轨道根据网格容器上的 justify-content 和 align-content 属性在内容框内对齐。

例如，以下网格垂直居中，并与其网格容器的右边缘对齐：

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

如果没有网格轨道（显式网格为空，并且在隐式网格中未创建轨道），则每个轴中的唯一网格线与网格容器的起始边缘对齐。

请注意，justify-content 和 align-content 的某些值可能导致轨道间隔开（space-around、space-between、space-evenly）或调整大小（stretch）。如果网格在轨道之间分段，则必须抑制这些轨道之间的任何此类额外间距。

例如，在以下网格中，跨越项的网格区域会增加以容纳由于对齐而分配给间距的额外空间：

.wrapper {
    display: grid;
    /* 3 行 / 4 列网格容器 */
    grid: repeat(3, auto) / repeat(4, auto);
    gap: 10px;
    align-content: space-around;
    justify-content: space-between;
}

.item1 { grid-column: 1 / 5; }
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
/* 最后两个项目自动放置到最后两个网格单元格中 */

具有 10px 间隙且元素跨越所有列的网格。
列的总和小于网格容器的宽度。 — 对齐前的网格

相同的网格，增加了间隙以吸收多余的网格容器宽度。
跨越元素已增长以容纳分配给其跨越的间隙的额外空间。 — 对齐后的网格

请注意，对齐（与gap 间距不同）发生在网格轨道尺寸确定之后，因此如果轨道尺寸由跨越项的内容确定，它将在对齐阶段获得额外的空间以容纳对齐间距。

10.6. 网格容器基线

网格容器的第一个（最后一个）基线确定如下：

找到网格容器中包含至少一个网格项的第一个（最后一个）行。
如果与此行相交的任何网格项在该行中参与基线对齐，则网格容器的基线集是根据这些网格项的共享对齐基线生成的。

否则，网格容器的第一个（最后一个）基线集是根据按行优先网格顺序（根据网格容器的书写模式）排列的第一个（最后一个）网格项的对齐基线生成的。如果网格项在网格的内联轴上没有对齐基线，则首先根据其边框边缘合成一个。
如果网格容器不包含任何网格项，则网格容器没有第一个（最后一个）基线集，如果需要，则根据其对齐上下文的规则合成一个。退出此算法。

网格修改的文档顺序（网格顺序）是在遍历网格的网格单元格时遇到网格项的顺序。如果同时遇到两个项目，则按顺序修改的文档顺序排列。

根据上述规则计算基线时，如果贡献基线的框具有允许滚动的overflow 值，则在确定其基线时，必须将该框视为处于其初始滚动位置。

当确定表格单元格的基线时，网格容器提供的基线与行框或表格行提供的基线相同。[CSS2]

有关基线的更多信息，请参见 CSS Writing Modes 3 § 4.1 基线简介和 CSS Box Alignment 3 § 9 基线对齐详细信息。

11. 网格布局算法

本节定义了网格布局算法，该算法确定网格容器的大小，确定所有网格轨道的大小和位置，并布局已放置到其网格区域中的网格项目。

运行网格项目放置算法以解析网格中所有网格项目的放置。
根据§ 5.2 网格容器尺寸调整确定网格容器的大小。

注意：在此阶段，轨道尺寸中的循环<percentage>值被视为auto。
给定最终的网格容器大小，运行网格尺寸调整算法以确定网格的大小。

注意：在此阶段，轨道尺寸中的<percentage>值将根据网格容器的大小进行解析。
将网格项目布局到其各自的包含块中。为此，每个网格区域的宽度和高度都被视为确定的。

注意：由于仅使用确定尺寸计算的公式（例如拉伸适应公式）也是确定的，因此拉伸的网格项目的大小也被视为确定的。

11.1. 网格尺寸调整算法

本节定义了网格尺寸调整算法，该算法确定所有网格轨道的大小，并因此确定整个网格的大小。

每个轨道都有指定的最小和最大尺寸调整函数（它们可能相同）。每个尺寸调整函数是以下之一：

固定尺寸调整函数（<length> 或可解析的<percentage>）。
固有尺寸调整函数（min-content、max-content、auto、fit-content()）。
弹性尺寸调整函数（<flex>）。

网格尺寸调整算法定义了如何将这些尺寸约束解析为使用的轨道尺寸。

首先，使用轨道尺寸调整算法来解析网格列的大小。
如果在此步骤中计算网格项目的布局取决于可用空间（在块轴方向），则假定其可用空间为：如果任何具有确定最大轨道尺寸调整函数的行具有该大小，并且所有其他行为无限大。如果网格容器和所有轨道都具有确定的大小，则还应用align-content来查找由此类项目跨越的任何间隙的最终有效大小；否则，在此估算中忽略轨道对齐的影响。
使用启发式方法尝试更准确的初始估计是否有帮助？例如，假设其可用空间为以下各项的最大值：
- 它跨越的所有确定轨道尺寸的总和（如果轨道的最小和最大尺寸调整函数都是确定的，则使用其最大值，如果fit-content()的参数是确定的，则使用该参数）。
- 项目的min-content大小，如果它跨越的任何轨道具有min-content或fit-content()尺寸调整函数。
- 项目的自动最小尺寸，如果它跨越的任何轨道具有auto最小尺寸调整函数。
- 无穷大，如果它跨越的任何轨道具有max-content最小尺寸调整函数或max-content、auto或<flex>最大尺寸调整函数。
这可能会减少必要的重新布局次数，但在任何情况下它会产生不同或更好的结果吗？我们应该将其纳入规范吗？
接下来，轨道尺寸调整算法解析网格行的大小。
要查找任何其块轴尺寸贡献需要它的项目的内联轴可用空间，请使用上一步中计算的网格列大小。如果网格容器的内联尺寸是确定的，还应用justify-content来考虑有效的列间隙大小。
然后，如果任何网格项目的min-content 贡献基于步骤 2 中计算的行大小和对齐方式发生了更改，则使用新的min-content和max-content 贡献重新解析网格列的大小（仅一次）。
要查找任何其内联轴尺寸贡献需要它的项目的块轴可用空间，请使用上一步中计算的网格行大小。如果网格容器的块大小是确定的，还应用align-content来考虑有效的行间隙大小。

当网格项目的内联尺寸取决于其网格区域的块大小时，此重复是必要的。示例包括换行的列弹性容器（flex-flow: column wrap）、正交流（writing-mode）、多列容器，以及具有宽高比（或其子元素具有宽高比）且其大小取决于行大小的项目。
接下来，如果任何网格项目的min-content 贡献基于步骤 3 中计算的列大小和对齐方式发生了更改，则使用新的min-content和max-content 贡献重新解析网格行的大小（仅一次）。
要查找任何其块轴尺寸贡献需要它的项目的内联轴可用空间，请使用上一步中计算的网格列大小。如果网格容器的内联尺寸是确定的，还应用justify-content来考虑有效的列间隙大小。
最后，根据align-content和justify-content属性在网格容器内对齐轨道。
注意：这会在轨道之间引入额外的空间，可能会扩大跨越间隙的任何网格项目的网格区域，超出轨道尺寸调整期间分配的空间。

11.2. 轨道尺寸调整术语

最小轨道尺寸调整函数

如果轨道是使用minmax()函数调整大小的，则这是该函数的第一个参数。如果轨道是使用<flex>值或fit-content()函数调整大小的，则为auto。否则，为轨道的尺寸调整函数。

最大轨道尺寸调整函数

如果轨道是使用minmax()函数调整大小的，则这是该函数的第二个参数。否则，为轨道的尺寸调整函数。在所有情况下，将auto和fit-content()视为max-content，除非对fit-content()另有规定。

可用网格空间

在每个维度上独立地，可用网格空间是：

如果网格容器的大小是确定的，则使用其内容框的大小。
如果网格容器正在 min-content 约束或max-content 约束下调整大小，则可用网格空间是该约束（并且是不确定的）。

注意：指示基于内容的尺寸调整的auto尺寸（例如，水平书写模式中块级框的高度）等效于max-content。

在所有情况下，根据网格容器的 min/max-width/height 属性（如果它们是确定的）来限制可用网格空间。

可用空间

等于可用网格空间减去所有网格轨道（包括间隙）的基本尺寸的总和，向下取整为零。如果可用网格空间是不确定的，则可用空间也是不确定的。

跨度计数

网格项目在适用维度上跨越的网格轨道的数量。

注意：请记住，就网格尺寸调整算法而言，间隙被视为空的固定大小轨道——其最小和最大尺寸调整函数都设置为间隙的已用大小。它们的宽度需要相应地合并到轨道尺寸调整算法的计算中。

11.3. 轨道尺寸调整算法

本节的其余部分是轨道尺寸调整算法，它根据最小和最大轨道尺寸调整函数计算已用轨道尺寸。每个轨道都有一个基本尺寸，这是一个在整个算法过程中增长并将最终成为轨道最终尺寸的<length>，以及一个增长限制，这是一个为基本尺寸提供期望最大尺寸的<length>。有 5 个步骤：

初始化轨道尺寸
解析固有轨道尺寸
最大化轨道
扩展弹性轨道
扩展拉伸的auto轨道

11.4. 初始化轨道尺寸

初始化每个轨道的基本尺寸和增长限制。对于每个轨道，如果轨道的最小轨道尺寸调整函数是：

固定尺寸调整函数: 解析为绝对长度，并将该大小用作轨道的初始基本尺寸。
注意：不确定长度不会出现，因为它们被视为auto。
固有尺寸调整函数: 使用零作为初始基本尺寸。

对于每个轨道，如果轨道的最大轨道尺寸调整函数是：

固定尺寸调整函数: 解析为绝对长度，并将该大小用作轨道的初始增长限制。
固有尺寸调整函数
弹性尺寸调整函数: 使用无穷大作为初始增长限制。

在所有情况下，如果增长限制小于基本尺寸，则将增长限制增加到与基本尺寸匹配。

注意：就轨道尺寸调整算法而言，间隙被视为空的固定大小轨道。

11.5. 解析固有轨道尺寸

此步骤将固有轨道尺寸调整函数解析为绝对长度。首先，它根据完全包含在单个轨道内的项目解析这些尺寸。然后，它逐渐增加跨越多个轨道的项目的空间需求，尽可能均匀地将额外空间分配到这些轨道上。

注意：此步骤完成后，所有固有的基本尺寸和增长限制都将解析为绝对长度。

注意：请记住，fit-content()和auto 最大轨道尺寸调整函数的处理方式与max-content相同，除非另有明确规定。

调整基线对齐项目，使其固有尺寸贡献反映其基线对齐。对于每个基线共享组中的项目，在每个项目的开始/结束侧（对于第一/最后基线对齐）添加一个“垫片”（实际上是额外的边距），以便当它们一起开始/结束对齐时，它们的基线按指定对齐。
在下面的轨道尺寸调整中，将这些“垫片”视为项目固有尺寸贡献的一部分。如果一个项目使用多个固有尺寸贡献，则它可以为每个贡献设置不同的垫片。

例如，当网格容器具有不确定大小时，它首先在 min/max-content 约束下进行布局以找到大小，然后使用该大小进行“实际”布局（这会影响百分比轨道等）。为每个阶段添加的“垫片”是独立的，并且仅影响该阶段的布局。

注意：请注意，在此步骤中同时考虑了基线自对齐和基线内容对齐项目。

注意：由于其自身大小取决于固有尺寸轨道大小的网格项目不参与基线对齐，因此它们不会被调整。
调整轨道大小以适应非跨越项目：对于每个具有固有轨道尺寸调整函数且不是弹性尺寸调整函数的轨道，考虑其中跨度为 1 的项目：

对于 min-content 最小值：
如果轨道具有min-content 最小轨道尺寸调整函数，将其基本尺寸设置为项目min-content 贡献的最大值，向下取整为零。
对于 max-content 最小值：
如果轨道具有max-content 最小轨道尺寸调整函数，将其基本尺寸设置为项目max-content 贡献的最大值，向下取整为零。
对于 auto 最小值：
如果轨道具有auto 最小轨道尺寸调整函数，并且网格容器正在 min-/max-content 约束下调整大小，则将轨道的基本尺寸设置为其项目的受限 min-content 贡献的最大值，向下取整为零。项目的受限 min-/max-content 贡献（为此目的）是其min-/max-content 贡献（相应地），受最大轨道尺寸调整函数（可能是fit-content()轨道尺寸调整函数的参数）的限制（如果该函数是固定的），并最终受其最小贡献（定义如下）的限制。
否则，将轨道的基本尺寸设置为其项目的最小贡献的最大值，向下取整为零。项目的最小贡献是它可以具有的最小外部尺寸。具体来说，如果项目的计算首选尺寸表现为 auto或取决于其包含块在相关轴上的大小，则其最小贡献是假设项目的已用最小尺寸作为其首选尺寸而产生的外部尺寸；否则，项目的最小贡献是其min-content 贡献。因为最小贡献通常取决于项目内容的大小，所以它被认为是一种固有尺寸贡献。

注意：对于指定最小尺寸为auto（初始值）的项目，最小贡献通常等效于min-content 贡献——但在某些情况下可能不同，请参见§ 6.6 网格项目的自动最小尺寸。此外，最小贡献 ≤ min-content 贡献 ≤ max-content 贡献。

对于 min-content 最大值：
如果轨道具有min-content 最大轨道尺寸调整函数，将其增长限制设置为项目min-content 贡献的最大值。
对于 max-content 最大值：
如果轨道具有max-content 最大轨道尺寸调整函数，将其增长限制设置为项目max-content 贡献的最大值。对于fit-content()最大值，此外，通过fit-content()参数限制此增长限制。

在所有情况下，如果轨道的增长限制现在小于其基本尺寸，则将增长限制增加到与基本尺寸匹配。

注意：此步骤是下面处理跨越项目的步骤的简化，并且应该产生与在跨度为 1 的项目上运行这些指令相同的行为。
增加尺寸以适应跨越内容尺寸轨道的项目：接下来，考虑跨度为 2 且不跨越具有弹性尺寸调整函数的轨道的项目。
1. 对于固有最小值：首先将额外空间分配给具有固有最小轨道尺寸调整函数的轨道的基本尺寸，以适应这些项目的最小贡献。
  如果网格容器正在min-或max-content 约束下调整大小，则在此处使用项目的受限 min-content 贡献代替其最小贡献。（对于跨越多个轨道的项目，用于计算其受限 min-/max-content 贡献的上限是其跨越的任何轨道的固定最大轨道尺寸调整函数的总和，并且如果它仅跨越此类轨道，则应用此上限。）
2. 对于基于内容的最小值：接下来继续将额外空间分配给具有min-content或max-content的最小轨道尺寸调整函数的轨道的基本尺寸，以适应这些项目的min-content 贡献。
3. 对于 max-content 最小值：接下来，如果网格容器正在max-content 约束下调整大小，则继续将额外空间分配给具有auto或max-content的最小轨道尺寸调整函数的轨道的基本尺寸，以适应这些项目的受限 max-content 贡献。
  在所有情况下，继续将额外空间分配给具有max-content的最小轨道尺寸调整函数的轨道的基本尺寸，以适应这些项目的max-content 贡献。
4. 如果此时任何轨道的增长限制小于其基本尺寸，则将其增长限制增加到与其基本尺寸匹配。
5. 对于固有最大值：接下来将额外空间分配给具有固有最大轨道尺寸调整函数的轨道的增长限制，以适应这些项目的min-content 贡献。将在此步骤中增长限制从无限变为有限的任何轨道标记为可无限增长，以用于下一步。
  为什么存在可无限增长标志？
  
  Peter Salas 解释说：
```
考虑以下情况：

两个“auto”轨道（即“minmax(min-content, max-content) minmax(min-content, max-content)”）。
项目 1 在轨道 1 中，并且 min-content = max-content = 10。
项目 2 跨越轨道 1 和 2，并且 min-content = 30，max-content = 100。

在解析第一个项目的 min-content/max-content 之后，我们得到这个。

轨道 1：基本尺寸 = 10 增长限制 = 10

轨道 2：基本尺寸 = 0 增长限制 = 无穷大

然后我们解析第二个项目的 min-content/max-content。

阶段 1 将轨道 2 的基本尺寸设置为 20，以便两个轨道的基本尺寸总和为 30。
阶段 2 不执行任何操作，因为没有相关的轨道。
阶段 3 将轨道 2 的增长限制设置为 20，以便两个轨道的增长限制总和为 30。
在阶段 4 中，我们需要将增长限制的总和增加 70 以适应项目 2。
有两种选择：

1. 使每个轨道的增长限制均等增长，
  最终得到增长限制 = [45, 55]。
2. 仅增长第二个轨道的增长限制，
  最终得到增长限制 = [10, 90]。

通过在空间分配期间不将刚设置的增长限制视为约束
（即将其视为无穷大），
我们得到了第二个结果，
我们认为这是一个更好的结果，因为第一个轨道的大小仍然完全适合第一个项目。
```
6. 对于 max-content 最大值：最后继续将额外空间分配给具有max-content的最大轨道尺寸调整函数的轨道的增长限制，以适应这些项目的max-content 贡献。
对于具有更大跨度的项目，逐步重复，直到考虑了所有项目。
增加尺寸以适应跨越弹性轨道的项目：接下来，重复上一步，而是考虑（一起，而不是按跨度大小分组）所有确实跨越具有弹性尺寸调整函数的轨道的项目，同时
- 仅将空间分配给弹性轨道（即将所有其他轨道视为具有固定尺寸调整函数）
- 如果项目跨越的所有弹性轨道的弹性尺寸调整函数的总和大于或等于 1，则根据其弹性尺寸调整函数的比例将空间分配给此类轨道，而不是平均分配空间；如果总和小于 1，则根据其弹性尺寸调整函数的比例分配该部分空间，其余部分平均分配
如果任何轨道仍具有无限的增长限制（例如，因为它没有放置任何项目，或者它是一个弹性轨道），则将其增长限制设置为其基本尺寸。

注意：当项目跨越多个轨道时，没有单一的方法可以满足固有尺寸约束。该算法体现了许多启发式方法，这些方法已被证明在实际用例中（例如本规范前面的“游戏”示例）可以提供良好的结果。随着更高级启发式方法的确定，该算法将来可能会更新以将其考虑在内。

11.5.1. 在跨越的轨道之间分配额外空间

要分配额外空间，请执行以下步骤，并使用以下输入：

是影响基本尺寸还是增长限制（受影响的尺寸）。
影响哪些轨道（受影响的轨道）。
正在适应哪些固有尺寸贡献（尺寸贡献），这些贡献来自跨越这些轨道的哪些网格项目（项目）。

为每个受影响的轨道单独维护一个计划增加量，初始设置为 0。（这可以防止尺寸增加变得与顺序相关。）
对于每个已适应的项目，仅考虑项目跨越的轨道：
1. 查找要分配的空间：从项目的尺寸贡献中减去每个跨越轨道（不仅仅是受影响的轨道）的受影响的尺寸，向下取整为零。（对于无限的增长限制，替换为轨道的基本尺寸。）这个剩余的尺寸贡献就是要分配的空间。
```
空间 = max(0, 尺寸贡献 - ∑轨道尺寸)
```
2. 在限制内分配空间：
  通过以下方式查找每个受影响的轨道的项目引起的增加量：在这些轨道之间平均分配空间，当轨道的受影响的尺寸 + 项目引起的增加量达到其限制时，冻结轨道的项目引起的增加量（并根据需要继续增长未冻结的轨道）。
  
  对于基本尺寸， 限制是其增长限制，如果有的话，受其fit-content()参数的限制。对于增长限制，如果增长限制是有限的并且轨道不是可无限增长的，则限制是增长限制，否则，如果它具有fit-content() 轨道尺寸调整函数，则为其fit-content()参数，否则为无穷大。
  
  注意：如果受影响的尺寸是增长限制并且轨道未标记为可无限增长的，则每个项目引起的增加量将为零。
3. 将空间分配给未受影响的轨道：
  如果此时仍有额外的空间，并且项目同时跨越受影响的轨道和未受影响的轨道，则按照上一步的方式分配空间，但分配给未受影响的轨道。
  
  注意：这将任何剩余空间分配给尚未达到其增长限制的轨道，而不是违反受影响的轨道的增长限制。
4. 分配超出限制的空间：
  如果此时仍有额外的空间，则解冻并继续将空间分配给……的项目引起的增加量
  - 当将最小贡献或min-content 贡献分配给基本尺寸时：任何恰好也具有固有最大轨道尺寸调整函数的受影响的轨道；如果没有此类轨道，则为所有受影响的轨道。
  - 当将max-content 贡献分配给基本尺寸时：任何恰好也具有max-content 最大轨道尺寸调整函数的受影响的轨道；如果没有此类轨道，则为所有受影响的轨道。
  - 当将任何贡献分配给增长限制时：任何具有固有最大轨道尺寸调整函数的受影响的轨道。
  为此， fit-content()轨道的最大轨道尺寸调整函数被视为max-content，直到轨道达到指定为fit-content()参数的限制，之后其最大轨道尺寸调整函数被视为该参数的固定尺寸调整函数（这可以更改在此步骤中继续接收空间的轨道）。
  
  注意：此步骤根据其最大轨道尺寸调整函数的类型，优先分配超出轨道当前增长限制的尺寸贡献的空间。
5. 对于每个受影响的轨道，如果轨道的项目引起的增加量大于轨道的计划增加量，则将轨道的计划增加量设置为该值。
通过加上计划增加量来更新轨道的受影响的尺寸，以便下一轮空间分配将考虑该增加量。（如果受影响的尺寸是无限的增长限制，则将其设置为轨道的基本尺寸加上计划增加量。）

11.6. 最大化轨道

如果可用空间为正，则将其平均分配给所有轨道的基准尺寸，当轨道达到其增长限制时冻结轨道（并根据需要继续增长未冻结的轨道）。

就此步骤而言：如果在最大内容约束下调整网格容器的大小，则可用空间是无限的；如果在最小内容约束下调整大小，则可用空间为零。

如果这将导致网格大于受其最大宽度/高度限制的网格容器的内部尺寸，则重新执行此步骤，将可用网格空间视为等于网格容器调整为其最大宽度/高度时的内部尺寸。

11.7. 扩展弹性轨道

此步骤使用在不超过可用空间的情况下可以分配给fr的最大值来调整弹性轨道的大小。

首先，找到网格已使用的弹性分数：

如果可用空间为零，或者如果在最小内容约束下调整网格容器的大小：

已使用的弹性分数为零。

否则，如果可用空间是确定长度：

已使用的弹性分数是使用所有网格轨道和可用网格空间的要填充空间来查找 fr 大小的结果。

否则，如果可用空间是不确定长度：

已使用的弹性分数是以下各项的最大值：

对于每个弹性轨道，如果弹性轨道的弹性因子大于 1，则为轨道的基准尺寸除以其弹性因子的结果；否则，为轨道的基准尺寸。
对于每个跨越弹性轨道的网格项目，使用该项目跨越的所有网格轨道和该项目的最大内容贡献的要填充空间来查找 fr 大小的结果。

如果使用此弹性分数会导致网格小于网格容器的最小宽度/高度（或大于网格容器的最大宽度/高度），则重新执行此步骤，将可用空间视为确定的，并将可用网格空间视为等于网格容器调整为其最小宽度/高度（最大宽度/高度）时的内部尺寸。

对于每个弹性轨道，如果已使用的弹性分数与轨道的弹性因子的乘积大于轨道的基准尺寸，则将其基准尺寸设置为该乘积。

11.7.1. 查找 fr 的大小

此算法查找 fr 单位在不超过目标大小的情况下可以具有的最大大小。必须使用一组网格轨道和一些要填充的空间来调用它。

令剩余空间为要填充的空间减去非弹性网格轨道的基准尺寸。
令弹性因子总和为弹性轨道的弹性因子的总和。如果此值小于 1，则将其设置为 1。
令假设的 fr 大小为剩余空间除以弹性因子总和。
如果假设的 fr 大小与弹性轨道的弹性因子的乘积小于轨道的基准尺寸，则重新启动此算法，将所有此类轨道视为非弹性的。
返回假设的 fr 大小。

11.8. 拉伸 auto 轨道

当网格容器的内容分布属性在此轴上为normal或stretch时，此步骤通过在具有auto 最大轨道尺寸调整函数的轨道之间平均分配任何剩余的正确定可用空间来扩展这些轨道。如果可用空间是不确定的，但网格容器具有确定的最小宽度/高度，则改用该大小计算此步骤的可用空间。

12. 网格布局分片

网格容器可以在行或列之间以及项目内部进行跨页断开。 break-* 属性照常应用于网格容器，取决于它们参与的格式化上下文。本节定义了它们如何应用于网格项目和网格项目的内容。

以下断行规则将分片容器称为“页面”。相同的规则适用于任何其他分片上下文。（根据需要将“页面”替换为适当的分片容器类型。）请参阅 CSS 分片模块 [CSS3-BREAK]。

分片网格容器的确切布局在本级网格布局中未定义。但是，网格容器内的断行受以下规则约束：

网格项目上的 break-before 和 break-after 属性会传播到其网格行。第一行上的 break-before 属性和最后一行上的 break-after 属性会传播到网格容器。
网格项目内的强制断行有效地增加了其内容的大小；它不会触发同级项目内的强制断行。
A 类断行机会出现在行或列之间（以适当轴为准），而 C 类断行机会出现在第一行/最后一行（列）与网格容器的内容边缘之间。 [CSS3-BREAK]
当网格容器在断行后继续时，其网格项目可用的空间（在分片上下文的块流方向上）会因先前页面上网格容器片段消耗的空间而减少。网格容器片段消耗的空间是其在该页面上内容框的大小。如果此调整导致可用空间变为负数，则将其设置为零。
除了上一点强加的项目重新排列之外，用户代理应尝试最大限度地减少网格容器相对于未分片流的失真。

12.1. 分片算法示例

本节内容不具约束力。

这是一个可能的分片算法的粗略草稿，仍需要与 [CSS-FLEXBOX-1] 算法进行严格的交叉检查以确保一致性。欢迎提供反馈；请参考上述规则作为实现指南。

遵循 § 11 网格布局算法来布局网格，方法是使用分片容器的内联大小并假设块大小不受限制。在此步骤中，必须解析所有 grid-row auto 和 fr 值。
使用上一步中解析的值布局网格容器。
如果网格区域的大小因分片而改变（在此决定中不包括跨行的项目），则根据需要增加以下行的网格行大小：
- 具有内容最小轨道尺寸函数。
- 位于没有明确高度且网格行为弹性的网格中。
如果网格高度为 auto，则网格的高度应为最终行大小的总和。
如果由于在分片期间合并外边距而导致网格区域溢出网格容器，则扩展网格容器以包含此网格区域（此步骤是为了避免由于分片而导致的循环布局依赖性所必需的）。

如果指定了网格的高度，则第三步和第四步可能会导致网格行溢出网格。

13. 隐私注意事项

网格布局不会引入新的隐私泄露。

14. 安全注意事项

网格布局不会引入新的安全注意事项。

致谢

本规范的制定离不开以下人士的贡献： Erik Anderson, Rachel Andrew, Rossen Atanassov, Oriol Brufau, Manuel Rego Casasnovas, Arron Eicholz, Javier Fernandez, Sylvain Galineau, Markus Mielke, Daniel Holbert, John Jansen, Chris Jones, Kathy Kam, Veljko Miljanic, Charbel Nicolas, Mats Palmgren, François Remy, Sergio Villar Senin, Jen Simmons, Christian Stockwell, Eugene Veselov, 以及 CSS 工作组成员，特别感谢微软的 Rossen Atanassov、Alex Mogilevsky、Phil Cupp 和 Peter Salas 创建了最初的提案。还要感谢 Eliot Graff 的编辑意见。

变更

本节记录了自上次发布以来的变更。

自 2020 年 12 月 18 日候选推荐标准 (CR) 以来的变更

当弹性总和在零和一之间时，更改了固有轨道空间在弹性轨道间的分布方式，以便在比例相对分布和均等分布之间进行插值，从而实现从零开始的连续性。 (问题 6078)

如果项目所跨越的所有弹性轨道的弹性尺寸函数之和大于零或等于一，则根据其弹性尺寸函数的比例向此类轨道分配空间，而不是平均分配空间；如果总和小于一，则根据其弹性尺寸函数的比例分配该部分空间，其余部分平均分配
阐明了网格项目的基于内容的最小尺寸是固有尺寸贡献的一种类型，因此会受到 [CSS-SIZING-3] 中相关规则的影响。 (问题 5665)
明确限制了传递尺寸建议对替换元素的应用，正如最初设想的那样，因为现在非替换元素也可以通过 aspect-ratio 拥有宽高比。 [CSS-SIZING-4] (问题 6069)
定义了可压缩替换元素的首选尺寸和最大尺寸上的百分比将针对零进行解析，并用于限制基于内容的最小尺寸，以使其自动最小尺寸不大于其最小内容贡献。 (问题 #6278)

在所有情况下，尺寸建议还会受到受影响轴上最大尺寸的限制，如果它是确定的。如果项目是可压缩的替换元素，并且在相关轴上具有确定的首选尺寸或最大尺寸，则尺寸建议受这些尺寸的限制；为此，这些尺寸中的任何不确定百分比都将针对零进行解析（并被视为确定的）。
定义了首选尺寸和最大尺寸上的百分比始终限制传递尺寸建议，使其严格弱于应用于该轴的任何尺寸约束。 (问题 #6278)

如果项目具有首选宽高比并且其在相对轴上的首选尺寸是确定的，则传递尺寸建议即为该尺寸（受相对轴最小和最大尺寸的限制，如果它们是确定的），通过宽高比转换而来。否则未定义。

如果项目在相关轴上具有确定的首选尺寸或最大尺寸，则传递尺寸建议受这些尺寸的限制；为此，这些尺寸中的任何不确定百分比都将针对零进行解析（并被视为确定的）。
将 § 10.2 使用自动外边距对齐设为规范性内容并收紧了措辞，因为此行为的某些方面在其他地方没有定义。（问题 5923 的一部分）
以相关的内容分布属性表现为 stretch 为条件，调整了 § 11.8 拉伸自动轨道；在早期更改中为了更好地将 stretch 处理整合到算法中时，此条件丢失了。 (问题 5966)
更精确地定义了 fit-content() 在容纳跨行项目时如何限制轨道增长。 (问题 4549)

对于固有最大值： 接下来，将额外空间分配给具有 max-content 的最大轨道尺寸函数的轨道的增长限制，以容纳这些项目的最大内容贡献。 ~~但是，通过其 fit-content() 参数限制任何 fit-content() 轨道的增长。~~

将 space 分配至限制： […]

对于基本尺寸， limit 是其增长限制，如果存在，则受其 fit-content() 参数的限制。对于增长限制， limit 是 ~~如果标记为无限增长，则为无穷大，否则等于增长限制~~ 如果增长限制是有限的并且轨道不是无限增长的，则为增长限制，否则，如果它具有 fit-content() 轨道尺寸函数，则为其 fit-content() 参数，否则为无穷大。
将 space 分配至超出限制： […]
- 当将任何贡献容纳到增长限制中时： ~~所有 affected tracks~~ 任何具有固有最大轨道尺寸函数的 affected track 。
为此， fit-content() 轨道的最大轨道尺寸函数被视为 max-content 直到它轨道达到指定为 fit-content() 参数的限制，之后它其最大轨道尺寸函数被视为具有是该参数的固定尺寸函数（这可能会改变哪些轨道在此步骤中继续接收空间）。
移除了静态位置对网格放置属性的敏感性，始终依赖于网格容器的内容框。 (问题 7661)

网格容器的绝对定位子元素的静态位置 [CSS2] 的确定方式，就好像它是网格区域中唯一的网格项目，该网格区域的边缘与网格容器的内容边缘重合。 ~~但是，如果网格容器父级也是绝对定位元素的包含块的生成者，则改用 § 9.1 以网格容器作为包含块中确定的网格区域。~~
重新排列了网格尺寸算法概述，以更好地表达网格容器尺寸与网格轨道尺寸之间的关系。参见 § 11 网格布局算法。 (问题 3418)

自 2020 年 8 月 18 日候选推荐标准 (CR) 以来的变更

修复了先前 CR 中因一次未记录的尝试澄清 § 6.2 网格项目尺寸与 aspect-ratio 的交互而引入的错误。
将一些“固有宽高比”的实例更新为使用更通用的术语首选宽高比。 (问题 4962)
次要编辑清理和跨规范术语的更好对齐。

自 2017 年 12 月 15 日候选推荐标准 (CR) 以来的变更

提供了意见处理。

主要变更

移除了网格项目块轴外边距和内边距可以相对于块维度解析的选项；它们必须相对于内联维度解析，就像块一样。 (问题 2085)
调整了跨越弹性轨道的项目对固有轨道尺寸的处理，以便它们对具有固有最小值的弹性轨道的大小做出贡献，而不是被忽略。 (问题 2177)
- 调整轨道尺寸以适应非跨越项目：对于每个具有固有轨道尺寸函数而不是弹性尺寸函数的轨道，考虑其中跨度为 1 的项目：
- …
- 增加尺寸以容纳跨越弹性轨道的项目： 接下来，重复上一步，改为（一起，而不是按跨度大小分组）考虑所有确实跨越具有弹性尺寸函数的轨道的项目，同时
  - 将弹性轨道视为具有等于其最小轨道尺寸函数的最大轨道尺寸函数
  - 仅向弹性轨道分配空间（即，将所有其他轨道视为具有其当前基本尺寸的固定尺寸函数）
  - 根据其弹性尺寸函数的比例向此类轨道分配空间，而不是平均分配空间
在最小内容/最大内容约束下调整网格大小时，限制了项目对auto最小轨道的贡献，使其不超过固定的最大值。 (问题 2303)

如果轨道具有auto 最小轨道尺寸函数，并且网格容器正在最小/最大内容约束下调整大小，则将轨道的基本尺寸设置为其项目的最小/最大内容贡献的最大值，分别地，如果最大轨道尺寸函数是固定的，则每个都限制为小于或等于最大轨道尺寸函数，并最终以其最小贡献为下限。

问题：对跨越项目做些什么。
更好地将轨道对齐（align-content/justify-content）整合到轨道尺寸算法中。 (问题 2557, 问题 2697)
要求轨道列表的已用值在序列化时不使用 repeat() 表示法。 (问题 2427)
指定用户代理应支持的最小轨道数（在没有内存压力或类似情况时）。 (问题 2261)

由于内存有限，用户代理可以将网格的可能大小限制在用户代理定义的限制内（该限制应容纳 [-10000, 10000] 范围内的行），，并删除超出该限制的所有行。如果网格项目放置在此限制之外，其网格区域必须限制在此受限网格内。
从行名称 <custom-ident> 中排除 auto。 (问题 2856)
要求 grid-template-areas 的指定值规范化空单元格标记和空白。 (问题 3261)

grid-template-areas 的 <string> 值的指定值和计算值都将每个空单元格标记序列化为单个“.” (U+002E FULL STOP) 并将每个空白序列序列化为单个空格 (U+0020 SPACE)。
网格容器子元素的静态位置应相对于网格容器的内容边缘而不是内边距边缘解析。 (问题 3020)

网格容器的绝对定位子元素的静态位置 [CSS2] 的确定方式，就好像它是网格区域中唯一的网格项目，该网格区域的边缘与网格容器的 ~~内边距~~ 内容边缘重合。
网格（和周围的内边距）包含在可滚动溢出区域中。参见 § 5.3 可滚动网格溢出。 (问题 3638, 问题 3665)
当弹性尺寸函数的总和为零时，在弹性轨道间分配额外空间时不要除以零。 (问题 3694)

如果项目所跨越的所有弹性轨道的弹性尺寸函数之和大于零，则根据其弹性尺寸函数的比例向此类轨道分配空间，而不是平均分配空间
不要将弹性轨道的增长限制计算为固有尺寸；在固有轨道尺寸调整结束时将其设置为基本尺寸，这样它们在最大化轨道期间不会增长（由于解释auto 最小轨道尺寸函数和最大轨道尺寸函数等的差异）。 (问题 3693)
- 将弹性轨道视为具有 ~~等于其最小轨道尺寸函数的最大轨道尺寸函数~~ 无限的增长限制
如果任何轨道仍具有无限的增长限制（例如，因为它没有放置任何项目或者它是一个弹性轨道），则将其增长限制设置为其基本尺寸。
在扩展弹性轨道时，将最小内容约束与零可用空间同等对待。 (问题 3683)

如果可用空间为零或者如果正在最小内容约束下调整网格容器的大小：

已用弹性分数为零。
如果网格项目跨越多个轨道，并且至少其中一个是弹性的，则也将其自动最小贡献归零。 (问题 4783)
为了为网格项目提供更合理的默认最小尺寸，一个其在给定轴上的自动最小尺寸的已用值 ~~在不是滚动容器且在该轴上至少跨越一个网格轨道（其最小轨道尺寸函数为auto）的网格项目上~~ 是其基于内容的最小尺寸；如果以下所有条件都为真：
- 它不是滚动容器
- 它在该轴上至少跨越一个网格轨道，其最小轨道尺寸函数为auto
- 如果它在该轴上跨越多个轨道，则这些轨道都不是弹性的
否则，已用自动最小尺寸照常为零。

小幅变更

恢复了为查找网格容器基线而忽略第一行之后项目的无意更改。同时阐明了遍历顺序。 (问题 3645)
- 否则，如果网格容器至少有一个网格项目 ~~其区域与第一（最后）行相交~~ ，网格容器的第一（最后）基线集是从第一个（最后） ~~这样的~~ 网格项目在行优先网格顺序中的对齐基线生成的（根据网格容器的书写模式）。如果项目在网格的内联轴中没有对齐基线，则首先从其边框边缘合成一个。
在计算 auto-fit 或 auto-fill 重复次数时，将最大轨道尺寸函数向下取整为最小轨道尺寸函数。 (问题 4043)

… (将每个轨道视为其最大轨道尺寸函数（如果该函数是确定的）或其最小轨道尺寸函数（否则），如果两者都是确定的，则将最大轨道尺寸函数向下取整为最小轨道尺寸函数，并考虑间隙) …
将弹性轨道的增长限制初始化为无穷大，而不是先将其设置为基本大小然后再更改。 (问题 4313)

一个固有尺寸函数
一个弹性尺寸函数
使用无穷大的初始增长限制。
~~一个弹性尺寸函数~~
~~使用轨道的初始基本大小作为其初始增长限制。~~
- ~~将弹性轨道视为具有无限的增长限制~~
此更改纯属编辑性的；它不应对实现产生任何影响。
阐明了在 grid-template-areas <string> 值中对空白进行规范化。 (问题 4335) 参见 § 7.3.1 模板字符串的序列化。
正确规定了“如果可能，使用基线对齐的项目” 和“使用出现的第一个项目，即使不在第一行” 条件正确组合在一起，因此，如果第一行中没有任何内容，但第二行中有基线对齐的项目，我们将使用该项目（而不是仅仅采用该行中的第一个项目）。问题 3645 的一部分。
1. 找到网格容器中包含至少一个网格项目的第一（最后）行。
  
  ~~如果其区域与网格容器的第一（最后）行相交的任何网格项目参与基线对齐，~~ 如果与此行相交的任何网格项目参与基线对齐，网格容器的基线集是从那些网格项目的共享对齐基线生成的。
  
  ~~否则，如果网格容器至少有一个网格项目，~~ 否则，网格容器的第一（最后）基线集是从第一个（最后）网格项目在行优先网格顺序中的对齐基线生成的（根据网格容器的书写模式）。 ~~如果项目在网格的内联轴中没有对齐基线，~~ 如果网格项目在网格的内联轴中没有对齐基线，则首先从其边框边缘合成一个。
2. ~~否则，网格容器没有第一（最后）基线集，~~ 如果网格容器不包含任何网格项目，网格容器没有第一（最后）基线集，并且如果需要，则根据其对齐上下文的规则合成一个。
正确地将项目搜索限制为仅参与正确的基线对齐的项目。 (问题 5293)
如果与此行相交的任何网格项目参与基线对齐在该行中，网格容器的基线集是从那些网格项目的共享对齐基线生成的。
要求 grid-template-areas 在网格中至少定义一个单元格；grid-template-areas: "" ""; 无效。 (问题 5110)

所有字符串必须具有相同数量的列单元格标记（命名单元格标记和/或空单元格标记），并且至少有一个单元格标记，否则声明无效。
恢复了在为固有最大轨道尺寸函数分配空间时，将最小内容贡献意外更改为最小贡献的更改。 (问题 4790)

对于固有最大值：接下来，通过根据需要分配额外空间来增加具有固有最大轨道尺寸函数的轨道的增长限制，以考虑这些项目的最小最小内容贡献。
将自动最小尺寸的条件固定在overflow的计算值上，而不是在作为滚动容器上来避免诸如替换元素的情况，这些元素的计算可滚动溢出值解析为不可滚动的使用值。 (7714)

澄清

澄清了 grid-auto-rows 和 grid-auto-columns 适用于由 grid-template-areas 创建但未被 grid-template-rows 或 grid-template-columns 分配大小的显式网格轨道。 (问题 4914)

… 这些线与显式网格一起构成隐式网格。 grid-auto-rows 和 grid-auto-columns 属性确定这些隐式网格轨道的大小，以及由 grid-template-areas 创建但未由 grid-template-rows 或 grid-template-columns 显式确定大小的任何显式网格轨道

grid-auto-columns 和 grid-auto-rows 属性指定了 ~~此类隐式轨道~~ 未被 grid-template-rows 或 grid-template-columns 分配大小的轨道的大小。

如果给定了多个轨道大小，则根据需要重复该模式以找到隐式受影响轨道的大小。 ~~显式网格~~ 最后一个显式确定大小的轨道之后的第一个 ~~隐式网格~~ 轨道接收第一个指定的大小，依此类推；而显式网格之前的最后一个隐式网格轨道接收最后一个指定的大小，依此类推。
在轨道尺寸确定算法中添加了提醒，即槽被视为空的固定大小轨道；阐明了它们与跨越项目的关系（当然，它们与它们的线被相同的项目跨越）。 (问题 2201)

为了轨道尺寸确定的目的，每个槽都被视为一个额外的、空的、固定大小的指定大小的轨道，它被任何跨越其相应网格线的网格项目跨越。

注意：请记住，为了网格尺寸确定算法的目的，槽被视为空的固定大小轨道——其最小和最大尺寸函数都设置为槽的已用大小。它们的宽度需要相应地并入轨道尺寸确定算法的计算中。
确保在固有尺寸确定期间轨道大小保持在零以上。 (问题 2655)
更清晰地定义了每个属性的计算值和动画类型线，特别是 grid-template-rows 和 grid-template-columns。 (PR 3198, 问题 3201)
澄清最小贡献是一种固有尺寸贡献。 (问题 3660)

项目的最小贡献，被认为是一种固有尺寸贡献，是可能产生的外部尺寸…
通过明确匹配正确的阶段来澄清超出增长限制分配空间的条件。 (问题 3621)
- 当 ~~处理具有min-content 或 auto 最小值的轨道的基本大小时~~ 容纳最小贡献或容纳最小内容贡献时：任何恰好也具有固有最大轨道尺寸函数的受影响轨道；如果没有此类轨道，则为所有受影响的轨道。
- 当 ~~处理具有max-content 最小值的轨道的基本大小时~~ 容纳最大内容贡献时：任何恰好也具有max-content 最大轨道尺寸函数的受影响轨道；如果没有此类轨道，则为所有受影响的轨道。
澄清了从最小尺寸获取最小贡献的情况。 (问题 3612)
项目的最小贡献是它可以具有的最小外部尺寸。具体来说，它是假设项目的已用最小尺寸（min-width 或 min-height，以匹配相关轴者为准）作为其首选尺寸（width 或 height，以匹配相关轴者为准）如果其计算的首选尺寸表现为 auto 或取决于相关轴中容器的大小；否则是项目的最小内容贡献。因为最小尺寸通常取决于项目内容的大小，它被认为是一种固有尺寸贡献。
澄清了块化通过具有 display: contents 的中间元素发生，并且不考虑 grid/inline-grid 元素是否最终实际生成网格容器框。 (问题 4065)

~~网格项目的display 值被块化：如果生成网格容器的元素的流内子元素的指定display 是内联级值，则它计算为其块级等效项。~~ 如果元素的最近祖先元素（跳过display:contents 祖先）的计算的 display 值为grid 或 inline-gird，则元素自身的display 值被块化。

注意：即使flex 或 inline-flex 元素最终没有生成flex 容器框（例如，当它被替换或位于display: none 子树中时），块化仍然发生。
添加了提醒，即 fit-content() 的参数不会限制自动最小尺寸。 (问题 4549)

fit-content() 的参数不会像固定最大轨道尺寸函数那样限制基于内容的最小尺寸。
澄清了§ 11.7 扩展弹性轨道中弹性轨道的前置条件。
使用的弹性分数是以下各项的最大值：
- 对于每个弹性轨道，如果轨道的弹性因子大于 1，则为将轨道的基本大小除以其弹性因子的结果；否则为轨道的基本大小。
- 对于跨越弹性轨道的每个网格项目，使用项目跨越的所有网格轨道和项目最大内容贡献的填充空间来查找 fr 大小的结果。
使项目引起的增加的初始计算更易于阅读。 (问题 5351)
将空间~~分配给基本大小~~直至增长限制：通过以下方式找到每个具有受影响大小的跨越轨道的项目引起的增加：在这些轨道之间平均分配空间，当轨道的受影响大小 + 项目引起的增加达到其~~增长限制~~ 限制时，冻结轨道的项目引起的增加（并根据需要继续增长未冻结的轨道）。
~~如果在此阶段将轨道标记为无限可增长，则为此计算将其增长限制视为无限（然后取消标记）。~~

对于基本大小， 限制是其增长限制。对于增长限制，如果标记为无限可增长，则限制为无穷大，否则等于增长限制。

注意：如果受影响的大小是增长限制并且轨道未标记为无限可增长，则每个项目引起的增加将为零 ~~此步骤无效~~ 。

自 2016 年 9 月 29 日 CR 以来的变更

还提供了意见处理。

主要变更

由于缺乏实现和需要进一步讨论，将 subgrid 功能推迟到第 2 级。 (问题 958)
从 grid 简写属性重置的属性列表中移除了 grid-row-gap 和 grid-column-gap。 (问题 1036)
移除了 grid-row-gap、grid-column-gap 和 grid-gap 属性，替换为 row-gap、column-gap 和 gap，这些属性现在在 CSS Box Alignment 中定义。 (问题 1696)
更改了具有自然尺寸的网格项目（例如图像）的自动尺寸确定方式，以便在对齐属性为 normal（默认情况）时始终保持其自然尺寸。 (问题 #523) 参见 § 6.2 网格项目尺寸确定 (与原始版本比较)。
更改了网格容器（其大小取决于这些轨道的尺寸）内 <percentage> 轨道的行为，以匹配实现，方法是将其尺寸贡献为 auto，然后根据生成的网格容器尺寸解析百分比，而不是完全将其视为 auto 轨道，或者为了在不溢出的情况下满足百分比而从 auto 尺寸增加其尺寸和网格容器的尺寸。当在fit-content尺寸的网格容器（例如 auto尺寸的内联或浮动网格容器）中使用<percentage>尺寸时，这通常会导致轨道溢出网格容器，并且轨道内容溢出轨道。（为避免此问题，请改用 <flex> 单位，这些单位旨在在网格固有尺寸确定时保持其比例并且不溢出。）

如果网格容器的大小取决于其轨道的尺寸，则<percentage> 必须被视为 auto 用于计算网格容器的固有尺寸，然后根据该尺寸解析以布置网格及其项目。 ~~UA 可以调整轨道的固有尺寸贡献到网格容器的大小，并通过最小量增加轨道的最终尺寸，以满足百分比要求。~~

重要调整和修复

将弹性因子限制为 1 也应用于不确定情况 (问题 26, 参见讨论):

~~每个弹性轨道的基本尺寸除以其弹性因子。~~ 如果弹性轨道的弹性因子大于 1，则为将轨道的基本尺寸除以其弹性因子的结果；否则，为轨道的基本尺寸。
更好地将网格轨道的 stretch 尺寸确定集成到轨道尺寸确定算法中。 (问题 1150, 问题 1866)

并且轨道在网格容器内根据 align-content 和 justify-content 属性对齐。注意：这可能会在轨道内部或轨道之间引入额外的空间。在轨道内部引入空间时，只有具有 auto 最大轨道尺寸函数的轨道才会接受空间。

这可能会在轨道之间引入额外的空间，从而可能将跨越间隙的任何网格项目的网格区域扩大到超出轨道尺寸确定期间分配的空间。
有 4 5 个步骤：
拉伸 auto 轨道

此步骤通过将任何剩余的正确定的自由空间平均分配给具有 auto 最大轨道尺寸函数的轨道来扩展这些轨道。如果自由空间是不确定的，但网格容器具有确定的 min-width/height，则改用该尺寸计算此步骤的自由空间。
更好地将网格项目的基线对齐集成到轨道尺寸确定算法中；排除了循环情况的参与。 (问题 1039, 问题 1365,)

如果在其该轴尺寸取决于固有尺寸轨道（因此其尺寸取决于项目的尺寸和基线对齐，从而产生循环依赖）的网格项目上指定了基线对齐，则该项目不参与基线对齐，而是使用其回退对齐。

调整基线对齐的项目，使其固有尺寸贡献反映其基线对齐。 对于每个基线共享组中的项目，在每个项目的开始/结束侧（对于第一/最后基线对齐）添加一个“垫片”（实际上是额外的外边距），以便当一起开始/结束对齐时，它们的基线按指定对齐。

在下面的轨道尺寸确定中，将这些“垫片”视为项目固有尺寸贡献的一部分。如果一个项目使用多个固有尺寸贡献，则它可以为每个贡献设置不同的垫片。

注意：请注意，在此步骤中同时考虑了基线自对齐和基线内容对齐的项目。

注意：由于其自身尺寸取决于固有尺寸轨道的尺寸的网格项目不参与基线对齐，因此不会对其进行调整。
调整了网格项目的自动最小尺寸，使其仅在跨越 auto 轨道时触发 (问题 12) 并确保当项目具有宽高比时这会正确影响传递的尺寸 (问题 11) 以便此隐含的最小值不会最终强制溢出：

… min-width/min-height 的 auto 值还在指定轴上对网格项目（其 overflow 为 visible 并且跨越至少一个其最小轨道尺寸函数为 auto 的轨道）应用自动最小尺寸。 …

但是，如果网格项目仅跨越具有固定最大轨道尺寸函数的网格轨道，则其在该维度中的 ~~自动最小尺寸~~ 指定尺寸和内容尺寸（以及另一维度中传递尺寸的输入）将进一步限制为小于或等于网格区域尺寸的拉伸适应（以防止自动最小尺寸强制其固定尺寸网格区域溢出）。
调整了网格项目的自动最小尺寸，优先使用传递的尺寸而不是内容尺寸，而不是取两者中较小的一个。 (问题 #1149)

… ~~其效果类似于施加在弹性项目上的自动最小尺寸。） [CSS-FLEXBOX-1]~~

给定维度中网格项目的自动最小尺寸是其指定尺寸（如果存在），否则是其传递尺寸（如果存在），否则是其内容尺寸，每个都如 [CSS-FLEXBOX-1] 中所定义。但是，如果网格项目仅跨越具有固定最大轨道尺寸函数的网格轨道 …
修复了算法在处理 auto 最小轨道尺寸时未正确处理 max-content 约束的错误；并进行了一些编辑改进。 (问题 5)
1. 增加尺寸以容纳跨越项目：接下来，考虑跨度为 2 且不跨越具有弹性尺寸函数的轨道的项目，当网格容器在最小/最大内容约束（分别为）下确定尺寸时，将最小轨道尺寸函数为 auto 的轨道视为 min-content/max-content ：
  1. …
  2. 对于基于内容的最小值：接下来继续增加具有最小轨道尺寸函数为 min-content 或 max-content 的轨道的基本尺寸 ~~，以及当网格容器在最小内容约束下确定尺寸时，具有最小轨道尺寸函数为 auto 的轨道~~ ，通过根据需要分配额外空间以考虑这些项目的最小内容贡献。
  3. 对于最大内容最小值：第三，继续增加具有最小轨道尺寸函数为 max-content 的轨道的基本尺寸 ~~，以及当网格容器在最大内容约束下确定尺寸时，具有最大轨道尺寸函数为 auto 的轨道~~ ，通过根据需要分配额外空间以考虑这些项目的最大内容贡献。
修复了分配额外空间算法中的错误，其中累积是按项目而不是按轨道集进行的；并且不清楚每个项目分配的空间应与计划的增加量取最大值，而不是添加到其中。 (问题 #1729)
1. 对于每个考虑的项目，
  1. …
  2. 将空间分配给基本尺寸直至增长限制： ~~将空间平均分配给具有受影响尺寸的每个跨越轨道的计划增加量~~ 通过在它们之间平均分配空间，找到每个具有受影响尺寸的跨越轨道的项目引起的增加 ，当轨道尺寸达到其增长限制时冻结轨道（并根据需要继续增长未冻结的轨道）。 …
  3. 分配超出增长限制的空间：如果在所有轨道都冻结后仍有剩余空间，解冻并继续将空间分配给 项目引起的增加的 …
  4. 对于每个受影响的轨道，如果轨道的项目引起的增加大于轨道的计划增加，则将轨道的计划增加设置为该值。
2. [编号从 ~~2.4~~ 改为 3] 更新轨道的受影响尺寸，方法是加上计划增加。（如果受影响的尺寸是无限的增长限制，则将其设置为轨道的基本尺寸加上计划增加。）
指定在轨道尺寸确定完成后，为了布置网格项目，网格区域被认为是确定的。 (问题 1319, 问题 1320)

一旦确定了每个网格区域的尺寸，网格项目就会被布置到各自的包含块中。为此目的，网格区域的宽度和高度被认为是确定的。

注意：由于仅使用确定尺寸计算的公式（例如拉伸适应公式）也是确定的，因此拉伸的网格项目的尺寸也被认为是确定的。
修复了块级网格容器尺寸确定定义中的错误：流内块级网格容器使用拉伸适应尺寸，而流外块级网格使用适应内容尺寸，与非替换块框完全相同。 (问题 1734)
作为块格式化上下文中的块级框，其尺寸确定方式与建立格式化上下文的块框类似，其内联尺寸的auto 计算方式与流内非替换块框相同。
修复了查找隐式网格轨道尺寸的模式重复中的错误。 (问题 1356)

如果给定了多个轨道尺寸，则根据需要重复该模式以找到隐式轨道的尺寸。显式网格之前之后的第一个隐式网格轨道接收第一个指定尺寸，依此类推；而显式网格之前的最后一个隐式网格轨道接收最后一个指定尺寸，依此类推。

澄清

澄清了 fit-content() 不受 stretch align-content/justify-content 的影响。 (问题 1732)

表示公式 min(max-content, max(auto, argument))，其计算方式类似于 ~~类似于 auto (即~~ minmax(auto, max-content) ) ，不同之处在于，如果轨道尺寸大于 auto 最小值，则将其限制为 argument。
澄清了最小贡献的定义。 (问题 #507)

否则，将其基本尺寸设置为其项目的最小贡献的最大值 : 。项目的最小贡献是 ~~由其各自指定的~~ 假设项目的 min-width 或 min-height 值（以匹配相关轴者为准）作为其指定尺寸如果其指定尺寸（width 或 height，以匹配相关轴者为准）为 auto，否则为项目的最小内容贡献。
澄清了通过分布式对齐分配的空间是槽的一部分，并随之折叠。 (问题 #1140)

折叠轨道被视为具有固定的轨道尺寸函数 0px，并且其两侧的槽 ——包括通过分布式对齐分配的任何空间—— 折叠。

另请参阅对 CSS Box Alignment 的更改：

对齐主题： ~~适当轴上的非折叠网格轨道。~~ 适当轴上的网格轨道，在轨道之间插入的任何间距都添加到相关的槽中，并将折叠的槽视为单个空间插入机会。
将弹性长度的描述更改为使用“剩余空间”而不是“自由空间”，以避免混淆同名概念。 (问题 #1120)
澄清了最大化轨道步骤会增加轨道的基本尺寸。 (问题 #1120)
如果自由空间为正，则将其平均分配给所有轨道的基本尺寸，当轨道达到其增长限制时冻结轨道（并根据需要继续增长未冻结的轨道）。
杂项琐碎修复和次要编辑改进。

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语的组合来表达。本文档规范部分中的关键词“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”和“OPTIONAL”应按照 RFC 2119 中的描述进行解释。但是，为了便于阅读，这些词在本规范中不大写显示。

本规范的所有文本都是规范性的，明确标记为非规范性的部分、示例和注释除外。 [RFC2119]

本规范中的示例以“例如”一词开头，或者使用 class="example" 与规范性文本分开，如下所示：

信息性注释以“注意”一词开头，并使用 class="note" 与规范性文本分开，如下所示：

忠告是规范性部分，其样式旨在引起特别注意，并使用 <strong class="advisement"> 与其他规范性文本分开，如下所示： UA 必须提供可访问的替代方案。

一致性类别

如果样式表中使用本模块中定义的语法的所有语句根据通用 CSS 语法和本模块中定义的每个功能的各个语法都是有效的，则该样式表符合本规范。

如果渲染器除了按照相应规范的定义解释样式表外，还通过正确解析它们并相应地渲染文档来支持本规范定义的所有功能，则该渲染器符合本规范。但是，由于设备限制导致 UA 无法正确渲染文档并不会使 UA 不符合规范。（例如，不要求 UA 在单色监视器上渲染颜色。）

如果创作工具编写的样式表在语法上根据通用 CSS 语法和本模块中每个功能的各个语法都是正确的，并且满足本模块中描述的样式表的所有其他一致性要求，则该创作工具符合本规范。

部分实现

为了使作者能够利用向前兼容的解析规则来分配回退值，CSS 渲染器必须将任何它们没有可用支持级别的 at-rules、属性、属性值、关键字和其他语法结构视为无效（并酌情忽略）。特别是，用户代理不得选择性地忽略不受支持的组件值并在单个多值属性声明中支持受支持的值：如果任何值被视为无效（不受支持的值必须如此），CSS 要求忽略整个声明。

不稳定和专有功能的实现

非实验性实现

一旦规范达到候选推荐阶段，就可以进行非实验性实现，并且实现者应该发布他们可以证明根据规范正确实现的任何 CR 级别功能的无前缀实现。

为了建立和维护 CSS 在各种实现之间的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前向 W3C 提交一份实现报告（以及必要的测试用例）。提交给 W3C 的测试用例将由 CSS 工作组进行审查和更正。

CR 退出标准

为了使本规范能够进入建议推荐阶段，每个功能必须至少有两个独立的、可互操作的实现。每个功能可以由不同的产品集实现，不要求所有功能都由单个产品实现。出于此标准的考虑，我们定义以下术语：

CSS 网格布局模块第 1 级

摘要

本文档的状态

1. 引言

1.1. 背景与动机

1.1.1. 使布局适应可用空间

1.1.2. 源顺序独立性

1.2. 值定义

2. 概述

2.1. 声明网格

2.2. 放置项目

2.3. 调整网格尺寸

3. 网格布局概念与术语

3.1. 网格线

3.2. 网格轨道和单元格

3.3. 网格区域

4. 重新排序与可访问性

5. 网格容器

5.1. 建立网格容器：grid 和 inline-grid display 值

5.2. 调整网格容器尺寸

5.3. 可滚动网格溢出

5.4. 限制大网格

6. 网格项目

6.1. 网格项目显示

6.2. 网格项目尺寸调整

6.3. 重排网格项目：order 属性

6.4. 网格项目外边距和内边距

6.5. Z 轴排序：z-index 属性

6.6. 网格项目的自动最小尺寸

7. 定义网格

7.1. 显式网格

7.2. 显式轨道尺寸调整：grid-template-rows 和 grid-template-columns 属性

7.2.1. 轨道尺寸

7.2.2. 命名网格线：[<custom-ident>*] 语法

7.2.3. 重复行和列：repeat() 表示法

7.2.3.1. repeat() 语法

7.2.3.2. 填充式重复：auto-fill 和 auto-fit 重复

7.2.3.3. repeat() 的插值/组合

7.2.4. 弹性长度：fr 单位

7.2.5. 轨道列表的计算值

7.2.6. 轨道列表的解析值

7.3. 命名区域：grid-template-areas 属性

7.3.1. 模板字符串的序列化

7.3.2. 隐式分配的行名称

7.3.3. 隐式命名区域

7.4. 显式网格简写：grid-template 属性

7.5. 隐式网格

7.6. 隐式轨道大小：grid-auto-rows 和 grid-auto-columns 属性

7.7. 自动放置：grid-auto-flow 属性

7.8. 网格定义简写：grid 属性

8. 放置网格项

8.1. 网格放置的常见模式

8.1.1. 命名区域

8.1.2. 数字索引和跨度

8.1.3. 命名线和跨度

8.1.4. 自动放置

8.2. 网格项放置与源顺序

8.3. 基于线的放置：grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性

8.3.1. 网格放置冲突处理

8.4. 放置简写：grid-column、grid-row 和 grid-area 属性

8.5. 网格项放置算法

9. 绝对定位

9.1. 以网格容器作为包含块

9.2. 以网格容器作为父元素

10. 对齐和间距

10.1. 间距：row-gap、 column-gap 和 gap 属性

10.2. 使用 auto 外边距对齐

10.3. 内联轴对齐：justify-self 和 justify-items 属性

10.4. 块轴对齐：align-self 和 align-items 属性

10.5. 对齐网格：justify-content 和 align-content 属性

10.6. 网格容器基线

11. 网格布局算法

11.1. 网格尺寸调整算法

11.2. 轨道尺寸调整术语

11.3. 轨道尺寸调整算法

11.4. 初始化轨道尺寸

11.5. 解析固有轨道尺寸

11.5.1. 在跨越的轨道之间分配额外空间

11.6. 最大化轨道

11.7. 扩展弹性轨道