CSS 网格布局模块第 2 级

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

1. 引言

本节不具有规范性。

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

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

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

网格第 2 级添加了 子网格 功能：子网格化的轴会将其网格线与元素父网格中的线对齐，并通过与父网格的这种集成来确定其轨道的尺寸。

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 定义网格

2.2. 放置项目

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

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: 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;
/* 等效于 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 属性，将调整大小后的网格在网格容器内进行对齐。 § 11 对齐和间距

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

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

3. 网格布局概念和术语

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

3.1. 网格线

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

#grid {
  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. 网格轨道和单元格

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

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

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

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

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

3.4. 嵌套项与子网格项

网格项目本身可以通过为其指定 display: grid 来成为网格容器。 在一般情况下，此嵌套网格的内容布局将独立于其参与的父网格的布局。

然而，在某些情况下，可能需要多个网格项目的内容相互对齐。 嵌套网格可以将其行和/或列的定义延迟到其父网格容器， 使其成为子网格。 在这种情况下，子网格的网格项目参与父网格的尺寸调整， 从而允许两个网格的内容对齐。 请参阅 § 9 子网格。

子网格由grid-template-rows 或 grid-template-columns 的 subgrid 关键字建立， 并且可以在任一轴或两个轴上进行子网格化。 没有子网格化轴的网格是独立网格。

<ul>
  <li><label>名称：</label> <input name=fn>
  <li><label>地址：</label> <input name=address>
  <li><label>电话：</label> <input name=phone>
</ul>

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

4. 重新排序和可访问性

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

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

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

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

<!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 或网格放置属性来执行重新排序， 除非作者明确指出底层文档顺序（决定语音和导航顺序）应与视觉顺序不同步。

5. 网格容器

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

grid

此值使元素生成一个网格容器框，当放置在流式布局中时，该框是块级的。

inline-grid

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

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

与常规嵌套网格不同， 子网格的内容参与其父网格格式化上下文； 因此，子网格不会建立独立的格式化上下文。

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

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

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

5.2. 调整网格容器大小

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

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

• 作为块格式化上下文中的块级框， 它的大小调整方式与建立格式化上下文的块框类似， 其自动行内尺寸的计算方式与非替换块框相同。
• 作为行内格式化上下文中的行内级框， 它的大小调整方式与原子行内级框（例如行内块）相同。

在行内和块格式化上下文中， 网格容器的自动块大小是其最大内容大小。

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

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

5.3. 可滚动网格溢出

overflow 属性适用于网格容器。

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

注意：当网格容器是滚动容器时，请注意与内边距的交互： 定义了根据需要向可滚动溢出矩形添加额外的内边距， 以启用可滚动内容的 place-content: end 对齐。 请参见 CSS Overflow 3 § 2.2 可滚动溢出

5.4. 限制大型网格

由于内存有限， UA 可能会将隐式网格的可能大小限制在 UA 定义的限制内 （该限制应能容纳 [-10000, 10000] 范围内的行）， 并删除超出该限制的所有行。 如果网格项目放置在此限制之外， 则其网格区域必须限制在此受限网格内。

要限制网格区域：

• 如果网格区域将跨越到受限网格之外， 则其跨度将被限制到受限网格的最后一行。

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

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

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

6. 网格项目

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

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

<div style="display: grid">

    <!-- 网格项目：块级子元素 -->
    <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. 网格项目尺寸调整

网格项目在其网格区域定义的包含块内确定大小。

给定维度中网格项目自动大小的计算因其自对齐值而异：

正常

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

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

拉伸

对非替换框使用内联大小计算规则 （在 CSS 2 § 10.3.3 常规流中的块级非替换元素中定义）， 即拉伸适应大小。

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

所有其他值

将项目大小调整为 fit-content。

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

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

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

与重新排序弹性项目一样， 仅当视觉顺序需要与语音和导航顺序不同步时才必须使用 order 属性； 否则应重新排序基础文档源。 请参阅 [CSS-FLEXBOX-1] 中的 CSS Flexbox 1 § 5.4.1 重新排序和可访问性。

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

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

网格项目上的百分比外边距和内边距 （如块框上的那些）， 是根据其包含块的内联大小解析的， 例如，在水平书写模式下，左/右/上/下百分比都根据其包含块的宽度进行解析。

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

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

当网格项目被定位到相交的网格区域时， 或者由于负外边距或定位而被定位到不相交的区域时，它们可以重叠。 网格项目的绘制顺序与内联块 [CSS2]完全相同， 只是使用顺序修改的文档顺序代替原始文档顺序， 并且除 auto 之外的 z-index 值即使在 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/等 最小尺寸不同） 不会强制框的尺寸变得不确定。 但是，如果在应用此最小值之前根据框的尺寸解析了百分比， 则在应用之后必须根据新尺寸重新解析它。

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

表示此属性不会创建任何 显式 网格轨道（尽管 显式网格 轨道仍可由 grid-template-areas 创建）。

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

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

将 轨道列表 指定为一系列 轨道尺寸调整函数 和 网格线名称。 每个 轨道尺寸调整函数 可以指定为长度、网格容器 大小的百分比、占据列或行的内容的度量，或网格中可用空间的一部分。它也可以使用 minmax() 表示法将其指定为一个范围，该表示法可以组合任何先前提及的机制，来为列或行指定单独的 最小 和 最大轨道尺寸调整函数。

subgrid <line-name-list>?

subgrid 值表示网格将采用其在该轴上的 父网格 的跨越部分（子网格化轴）。网格行/列的大小将从 父网格 的定义中获取，而不是显式指定，并且 子网格 的项目将参与与 父网格 共享的任何轨道的 固有尺寸计算（CSS Grid Layout 1 § 11.5 解析固有轨道尺寸）。本质上，子网格 提供了将网格参数向下传递到嵌套元素，并将基于内容的尺寸信息向上传递回其 父网格 的能力。

<line-name-list> 参数允许对与 父网格 共享的网格线进行本地命名：如果给定了 <line-name-list>，则指定的 <line-names> 将分配给 子网格 的 显式网格 的网格线，每条线一组，从第 1 条线开始。多余的 <line-names> 将被忽略。

如果没有 父网格，或者 网格容器 由于其他原因（例如，由于 布局包含 [CSS-CONTAIN-2] 或 绝对定位 [CSS-POSITION-3]）被迫建立 独立的格式化上下文，则 使用值 是初始值 none，并且 网格容器 不是 子网格。

未 子网格化 的轴是 独立轴。

轨道列表 的语法如下：

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

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

其中组件值的定义如下…

7.2.1. 轨道尺寸

<length-percentage [0,∞]>

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

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

<flex [0,∞]>

一个带有单位 fr 的非负尺寸，指定轨道的 弹性因子。每个 <flex> 尺寸的轨道根据其 弹性因子 按比例分配剩余空间。例如，给定一个轨道列表 1fr 2fr，轨道将分别占据 剩余空间 的 ⅓ 和 ⅔。更多详情请参见 § 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 贡献；然而，与 max-content 不同，它允许通过 align-content 和 justify-content 属性扩展轨道。

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

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

max-content

表示占据 网格轨道 的 网格项目 的最大 max-content 贡献。

min-content

表示占据 网格轨道 的 网格项目 的最大 min-content 贡献。

fit-content( <length-percentage> )

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

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

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

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

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

虽然网格线总是可以通过其数字索引来引用，但网格线名称可以使网格放置属性更易于理解和维护。网格线名称可以通过 grid-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，即 <line-names> 产品中的 <custom-ident> 不包括关键字 span 和 auto。

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

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

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

7.2.3.1. repeat() 的语法

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

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

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

• repeat() 表示法不能嵌套。

• 自动重复（auto-fill 或 auto-fit）不能与完全固有或弹性尺寸组合（参见语法）。

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

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

• <track-repeat> 变体可以表示任何 <track-size> 的重复，但仅限于固定数量的重复。

• <auto-repeat> 变体可以自动重复以填充空间，但需要确定的轨道尺寸，以便可以计算重复次数。它在轨道列表中只能出现一次，但同一个轨道列表也可以包含 <fixed-repeat>。

• <name-repeat> 变体用于向子网格添加网格线名称。它只能与 subgrid 关键字一起使用，并且不能指定轨道尺寸，只能指定网格线名称。

如果一个不是 <name-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 关键字在每个 <line-name-list> 中仅有效一次，并且重复足够的次数以使名称列表与子网格指定的网格跨度匹配（如果跨度已满足，则回退到 0）。

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

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

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> * <剩余空间> / <所有弹性因子的总和>。

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

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

7.2.5. 轨道列表的计算值

非子网格轴的计算轨道列表是一个在网格线名称集和轨道段之间交替的列表，第一个和最后一个项目是网格线名称集。

网格线名称集是一个表示网格线名称的（可能为空的）有序集合。

轨道段是以下任一项：

• 一个 minmax() 函数表示法，表示单个轨道的大小，其中每个 <length-percentage> 都已计算（一个计算轨道大小）

• 一个 repeat() 函数表示法，表示一个重复的轨道列表段，其中其 <integer> 已计算，并且其 <track-list> 表示为一个计算轨道列表（一个计算重复表示法）

子网格轴的计算轨道列表是 subgrid 关键字，后跟一个网格线名称集和计算重复表示法的列表，表示为该轴指定的网格线名称。

7.2.6. 轨道列表的解析值

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

7.2.6.1. 独立轨道列表的解析值

当元素生成一个网格容器框时，其在独立轴中的 grid-template-rows 或 grid-template-columns 属性的解析值是已用值，序列化方式如下：

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

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

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

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

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

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

7.2.6.2. 子网格轨道列表的解析值

当元素生成一个作为子网格的网格容器框时，grid-template-rows 和 grid-template-columns 属性的解析值表示已用的列数，序列化为 subgrid 关键字，后跟一个列表，该列表将其每条线表示为在子网格上显式定义的所有线的名称的网格线名称集（不包括从父网格采用的那些名称），而不使用 repeat() 表示法。

指定值: subgrid [a] repeat(auto-fill, [b]) [c]
解析值:  subgrid [a] [b] [b] [b] [c]

指定值: subgrid [a] [a] [a] [a] repeat(auto-fill, [b]) [c] [c]
解析值:  subgrid [a] [a] [a] [a] [c]

指定值: subgrid [] [a]
解析值:  subgrid [] [a] [] [] []

指定值: subgrid [a] [b] [c] [d] [e] [f]
解析值:  subgrid [a] [b] [c] [d] [e]

注意：这违反了一般的“最短等效序列化”原则，即通过序列化空的尾随网格线名称集，因为尾随网格线名称集提供了有关子网格跨越多少轨道的潜在有用信息。

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

此属性指定命名网格区域，这些区域不与任何特定的网格项目关联，但可以从网格放置属性中引用。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 {
    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 属性是一个用于在单个声明中设置 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;

并创建以下网格：

• 三列，大小分别为 auto、1fr 和 auto
• 两行，大小分别为 auto 和 1fr。
• 顶部一条名为 “header-top” 和 “a-start” 的线，中间一条具有四个名称——“header-bottom”、“main-top”、“a-end” 和 “b-start”——的线，底部一条名为 “main-bottom” 和 “b-end” 的线。
• 左边缘一条名为 “a-start” 和 “b-start” 的线，右边缘一条名为 “a-end” 和 “b-end” 的线。

注意：注意：repeat() 函数不允许在这些轨道列表（track listings）中使用，因为轨道（tracks）旨在与“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 属性指定未由 grid-template-rows 或 grid-template-columns 分配大小的轨道的大小。如果给定了多个轨道大小，则根据需要重复该模式以找到受影响轨道的大小。最后一个显式确定大小的轨道之后的第一个轨道接收第一个指定的大小，依此类推；显式网格之前的最后一个隐式网格轨道接收最后一个指定的大小，依此类推。

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

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

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

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

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

row

自动放置算法通过依次填充每一行来放置项目，必要时添加新行。如果未提供 row 或 column，则假定为 row。

column

自动放置算法通过依次填充每一列来放置项目，必要时添加新列。

dense

如果指定，自动放置算法将使用“密集”打包算法，该算法会尝试填充网格中较早出现的空洞（如果稍后出现较小的项目）。当这样做可以填充较大项目留下的空洞时，可能会导致项目出现乱序。

如果省略，则使用“稀疏”算法，其中放置算法在放置项目时仅在网格中“向前”移动，从不回溯以填充空洞。这可确保所有自动放置的项目都“按顺序”出现，即使这会留下本可以由后续项目填充的空洞。

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

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

在以下示例中，有三列，每列都根据其内容自动调整大小。没有显式定义行。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-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: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;

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

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

8. 放置网格项目

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

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

网格位置

网格项目在每个轴上网格中的位置。网格位置可以是确定的（显式指定）或自动的（由自动放置确定）。

网格跨度

网格项目在每个轴上占据多少网格轨道。一个轴上的网格跨度可以是隐式的、显式的或自动的：

• 如果其网格放置属性的 *-start 和 *-end 值都指定了一条线，则其网格跨度是隐式的。

• 如果它具有显式的 span 值，则其网格跨度是显式的。

• 否则，其网格跨度是自动的：如果它在该轴上是子网格化的，则其网格跨度由其 <line-name-list> 确定；否则其网格跨度为 1。

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

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

8.1. 网格放置的常见模式

本节内容仅供参考。

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

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;
    /* 从第 2 行开始，
        向下跨越 5 行（在第 7 行结束）。*/
}

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

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

8.1.3. 命名线和跨度

可以按线名称引用线，而不是按数字计数：

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

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

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

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

8.1.4. 自动放置

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

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

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

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

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

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

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

8.2. 网格项目放置与源顺序

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

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

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

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

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

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

值的含义如下：

<custom-ident>

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

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

否则，将其视为已随 <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。

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-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-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，则在此算法中交换所有提及的行和列、内联和块等。

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

0. 生成匿名网格项目，如 § 6 网格项目中所述。（匿名网格项目始终是自动放置的，因为它们的框不能指定任何网格放置属性。）

1. 定位所有非自动定位的项目。

2. 处理锁定到给定行的项目。

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

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

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

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

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

3. 确定隐式网格中的列。

   在隐式网格中创建列：

   1. 从显式网格中的列开始。

   2. 在所有具有确定列位置的项目（显式定位的项目、上一步中定位的项目以及尚未定位但具有确定列的项目）中，根据需要向隐式网格的开头和结尾添加列以容纳这些项目。

   3. 如果所有没有确定列位置的项目中最大的列跨度大于隐式网格的宽度，则向隐式网格的末尾添加列以容纳该列跨度。

   例如，在以下样式片段中：

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

   所需的列数为 6。显式网格提供了 5 列（来自 grid-template-columns），线号从 1 到 6，但是 #grid-item 的列位置意味着它结束于第 7 条线，这需要在隐式网格的末尾添加额外的列。

4. 定位剩余的网格项目。

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

   正在使用的 grid-auto-flow 值决定了如何定位项目：

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

   对于每个尚未通过先前步骤定位的网格项目，按照顺序修改后的文档顺序：

   如果项目具有确定的列位置：

   1. 将光标的列位置设置为网格项目的列起始线。如果这小于光标先前的列位置，则将行位置增加 1。

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

   3. 将项目的行起始线设置为光标的行位置，并根据其从该位置的跨度设置项目的行结束线。

   如果项目在两个轴上都具有自动网格位置：

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

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

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

   对于每个尚未通过先前步骤定位的网格项目，按照顺序修改后的文档顺序：

   如果项目具有确定的列位置：

   1. 将光标的行位置设置为隐式网格中最开始的行线。将光标的列位置设置为网格项目的列起始线。

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

   3. 将项目的行起始线索引设置为光标的行位置。（也隐式地根据其跨度设置项目的行结束线。）

   如果项目在两个轴上都具有自动网格位置：

   1. 将光标的行和列位置设置为隐式网格中最开始的行和列线。

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

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

9. 子网格

子网格的行为与普通网格容器完全相同，只是：

• 放置子网格会在其子网格化轨道与其在父网格中跨越的轨道之间建立对应关系。因此，子网格与其父级之间共享的网格线构成了子网格的显式网格，其轨道大小由父网格控制。
• 子网格在子网格化维度中的显式轨道数量始终与其在父网格中跨越的网格轨道数量相对应：
  • 如果子网格在子网格化维度中的网格跨度是显式或隐式的，则每个子网格化维度中的显式轨道数量取自其在该维度中使用的网格跨度（无论其 grid-template-* 属性如何）。
  • 如果它具有自动网格跨度，则其使用的网格跨度取自其 grid-template-* 属性为该轴指定的显式轨道数量，向下取整为 1。

  注意：如果子网格的放置被其父网格限制，则此处确定的显式网格可能会被进一步截断。请参阅“无隐式轨道”项目符号点。

  如果 grid-template-* 属性在子网格化轴中指定了 <line-name-list>，则使用的值将被截断以匹配使用的显式轨道数量。

• 子网格的网格项目的网格放置属性及其使用的行号的作用域限定为子网格覆盖的行，这与从其显式网格中排除子网格外部的行完全一致。例如，数字索引从子网格的第一行开始计数，而不是从父网格的第一行开始计数。

  行编号和放置规则遵循子网格自身的书写模式，就像它们对于嵌套的独立网格一样。

• 由于子网格可以在其内容放置之前放置，因此子网格化的行会自动接收父网格相应行上指定的显式分配的行名。

  这些名称是附加到在子网格上本地指定的任何行名之上的。

• 当子网格与其父级中由 grid-template-areas 属性声明创建的命名网格区域重叠时，会分配隐式分配的行名以表示子网格内父级的命名网格区域。

  注意：如果命名网格区域仅部分与子网格重叠，则其隐式分配的行名将被分配给子网格的第一行和/或最后一行，以便存在一个命名网格区域表示子网格的该部分重叠区域；因此，子网格的行名分配可能不总是与父网格的行名分配完全对应。

  这些名称也是附加到在子网格上本地指定的任何行名之上的。

  在以下示例中，4 列的祖父网格同时具有显式行名和由 grid-template-areas 生成的隐式行名：

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

  在所有类型的名称解析之后，每个网格的名称将是：

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

  请注意，所有显式分配的行名都直接继承到 .inner，但隐式分配的行名是根据每个子网格与原始命名网格区域的重叠情况计算的。

• 子网格在子网格化维度中没有任何隐式网格轨道。当显式网格没有足够的行时，通常使用假设的隐式网格线来解析放置；但是，每个网格项目的网格区域被限制到子网格的显式网格（使用与在过大网格中限制放置相同的过程）。
  例如，如果一个 span 1 子网格有一个网格项目，其 grid-column: 2 / span 3;，那么该项目将被强制放入（并限制在）子网格的第一个（也是唯一的）轨道中。

  注意：这意味着如果子网格的父级也是子网格，因此具有固定数量的轨道，则子网格的轨道数可能少于预期。（同样，由于其父级达到了UA 对网格轨道的限制，子网格的轨道数也可能少于预期。）

• 子网格本身在其父网格中作为普通网格项目进行布局，但在子网格化维度中，出于轨道大小调整的目的，其行为就像完全为空一样。
• 子网格自身的网格项目参与其父网格在子网格化维度中的大小调整，并在这些维度中与其对齐。

  在此过程中，子网格在每个边缘的边距、内边距、滚动条间距和边框的总和将作为额外的（可能是负的）边距层应用于这些边缘的项目。这个额外的“边距”层会通过多层子网格累积。

  例如，如果我们有一个 3×3 网格，其 轨道如下：

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

  如果一个子网格覆盖最后两条轨道， 它的前两列对应父网格的最后两列， 并且定位到这些轨道中的任何项目都会参与父网格的尺寸计算。 具体来说，定位在子网格第一条轨道中的项目 会影响父网格中间轨道的自动尺寸计算。

  #subgrid { grid-column: 2 / span 2; } /* 覆盖父网格的第 2 和第 3 条轨道 */
  #subgrid > :first-child { grid-column: 1; } /* 子网格的第 1 条轨道，父网格的第 2 条轨道 */
  

  如果子网格具有外边距/边框/内边距， 这些外边距/边框/内边距的尺寸也会影响尺寸计算。 例如，如果子网格具有 100px 的内边距：

  #subgrid { padding: 100px; }

  那么，网格项目在子网格的第一条轨道中 的表现就好像它额外具有 100px 的上、左和下外边距， 从而影响父网格轨道的尺寸计算 以及网格项目的自身位置。

  同时，子网格的间距（row-gap/column-gap）与其父网格的间距之差的一半，将作为额外的（可能是负的）边距层应用于不在这些边缘的项目。这个额外的“边距”层也会通过多层子网格累积。normal 值表示子网格具有与其父网格相同大小的间距，即应用的差值为零。

  注意：最终结果将是父网格的轨道将按指定大小调整，并且子网格的间距将在视觉上与父网格的间距居中对齐。

  例如，假设我们有一个 300px 宽的外部网格，间隙为 50px，其列指定为 100px 1fr。跨越两个轨道的子网格将具有……

  ……如果其 column-gap 为 normal（或 50px）：

  • 其左列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）没有任何特殊调整，因此会拉伸到 100px 宽，同时保持与子网格左边缘对齐。
  • 其右列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）没有任何特殊调整，因此会拉伸到 150px 宽，同时保持与子网格右边缘对齐。
  • 项目之间的有效视觉间距为 50px，与其父网格完全匹配。

  

  ……如果其 column-gap 为 0：

  • 其左列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 -25px 的右边距一样，因此会拉伸到 125px 宽，同时保持与子网格左边缘对齐。
  • 其右列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 -25px 的左边距一样，因此会拉伸到 175px 宽，同时保持与子网格右边缘对齐。
  • 项目之间的有效视觉间距为零，正如其 column-gap 所指定的那样。

  

  ……如果其 column-gap 为 25px：

  • 其左列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 -12.5px 的右边距一样，因此会拉伸到 112.5px 宽，同时保持与子网格左边缘对齐。
  • 其右列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 -12.5px 的左边距一样，因此会拉伸到 162.5px 宽，同时保持与子网格右边缘对齐。
  • 项目之间的有效视觉间距为 25px，正如其 column-gap 所指定的那样。

  

  ……如果其 column-gap 为 75px：

  • 其左列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 12.5px 的右边距一样，因此会拉伸到 87.5px 宽，同时保持与子网格左边缘对齐。
  • 其右列中的网格项目在调整大小和布局时（并将其大小贡献给父网格的大小计算）就像它有一个 12.5px 的左边距一样，因此会拉伸到 137.5px 宽，同时保持与子网格右边缘对齐。
  • 项目之间的有效视觉间距为 75px，正如其 column-gap 所指定的那样。

  

• 对于非空子网格的每个边缘，为了说明子网格在该边缘的边距/边框/内边距（以及任何滚动条间距），会为跨越到子网格最接近该边缘的已占用轨道的项目集合中的每个跨度大小，向轨道大小调整算法贡献一个假设项目。假设项目的大小取自每个跨度大小的此类最大项目的大小，并额外加上子网格自身在该边缘的边距/边框/内边距/间距。相应地，假设项目的跨度取自同一真实项目的跨度，并加上其与相关子网格边缘之间的空轨道数量。

  注意：如果最接近子网格边缘的轨道包含真实项目，则可以简化此步骤，这些真实项目已经如上所述说明了子网格的边距/边框/内边距。

  例如，在以下子网格布局中：

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

  假设子网格项目 a、b 和 c 占据其相应的网格区域，并且子网格内边距为 25px，则为了处理子网格的行内起始内边距，将向轨道大小调整算法贡献两个假设的网格项目：一个大小为 b 加上 25px，跨越前两列；另一个大小为 a 加上 25px，跨越前三列。

• 子网格始终在其子网格化维度中拉伸：其上的 align-self/justify-self 属性将被忽略，任何指定的宽度/高度约束也将被忽略。
• 在布局方面，子网格的网格始终与父网格的相应部分对齐；其上的 align-content/justify-content 属性在子网格化维度中也将被忽略。
• overflow 属性确实适用于子网格，以便可以将子网格的溢出内容滚动到视图中。（注意：滚动行为不影响布局。）
• 相对定位正常应用于子网格，并像往常一样一起移动框及其内容。（注意：相对定位在对齐之后进行，并且不影响轨道大小调整。）

10. 绝对定位

10.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 网格放置冲突处理导致第二个跨度被忽略时，会发生这种情况。）

10.2. 以网格容器作为父级

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

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

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

11. 对齐和间距

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

注意：子网格的网格项目与其父网格的项目一起参与对齐，包括基线对齐；请参阅子网格 (h)。

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

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

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

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

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

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

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

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

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

11.2. 使用 auto 外边距对齐

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

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

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

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

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

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

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

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

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

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

如果网格的外部边缘与网格容器的内容边缘不对应（例如，如果没有列是弹性大小的），则网格轨道将根据网格容器上的 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; }
/* 最后两个项目自动放置到最后两个网格单元格中 */

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

11.6. 网格容器基线

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

1. 找到网格容器中包含至少一个网格项目的第一（最后）行。

   如果与此行相交的任何网格项目参与该行中的基线对齐，则网格容器的基线集将从这些网格项目的共享对齐基线生成。

   否则，网格容器的第一（最后）基线集将从按行优先网格顺序（根据网格容器的书写模式）排列的第一个（最后）网格项目的对齐基线生成。如果网格项目在网格的内联轴中没有对齐基线，则首先从其边框边缘合成一个。

2. 如果网格容器不包含任何网格项目，则网格容器没有第一（最后）基线集，如果需要，将根据其对齐上下文的规则合成一个。退出此算法。

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

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

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

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

12. 网格布局算法

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

1. 运行网格项目放置算法以解析网格中所有网格项目（包括子网格及其子项目）的放置。

2. 根据§ 5.2 网格容器大小调整确定网格容器的大小。

   注意：在此阶段，轨道大小中的循环<percentage>被视为auto。

3. 给定生成的网格容器大小，运行网格大小调整算法以确定网格的大小。

   注意：在此阶段，轨道大小中的<percentage>将根据网格容器大小进行解析。

4. 将网格项目布局到其各自的包含块中。为此，每个网格区域的宽度和高度均被视为确定的。

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

12.1. 网格大小调整算法

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

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

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

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

1. 首先，使用轨道大小调整算法来解析网格列的大小。

   在此过程中，任何在网格容器的内联轴中进行子网格划分的网格项目都将被视为空，并且其网格项目（孙项目）将被视为网格容器（其祖父容器）的直接子项。这种内省是递归的。

   仅在块轴中进行子网格划分，并且其网格容器在内联轴中的大小取决于其内容大小的项目也会被内省：由于项目在此维度中的大小可能取决于其在另一个维度中子网格化轨道的大小调整，因此任何此类项目对此网格列大小调整的贡献（请参阅解析固有轨道大小）都是在已确定其轨道大小调整仅达到与此本身相同的网格大小调整算法点的前提下进行的。例如，对于此步骤的第一次遍历，项目将仅通过此第一步确定其轨道大小；如果触发此步骤的第二次遍历，则项目将在返回其大小以供此网格列大小调整考虑之前，完成步骤 1-3 的第一次遍历以及此步骤的第二次遍历。同样，这种内省是递归的。

   如果在此步骤中计算网格项目的布局取决于块轴中的可用空间，则假定可用空间是如果任何具有确定最大轨道大小调整函数的行具有该大小并且所有其他行都是无限的时它将具有的空间。如果网格容器和所有轨道都具有确定大小，则还应用 align-content 来查找由此类项目跨越的任何间隙的最终有效大小；否则在此估算中忽略轨道对齐的影响。

2. 接下来，轨道大小调整算法解析网格行的大小。

   在此过程中，任何在网格容器的块轴中进行子网格划分的网格项目都将被视为空，并且其网格项目（孙项目）将被视为网格容器（其祖父容器）的直接子项。这种内省是递归的。

   与调整列大小一样，仅在内联轴中进行子网格划分，并且其网格容器在块轴中的大小取决于其内容大小的项目也会被内省。（与调整列大小一样，对此网格行大小调整的贡献是在已确定其轨道大小调整仅达到算法中此对应点的前提下进行的；同样，这种内省是递归的。）

   要查找其块轴大小贡献需要它的任何项目的内联轴可用空间，请使用上一步中计算的网格列大小。如果网格容器的内联大小是确定的，则还应用 justify-content 来考虑有效的列间隙大小。

3. 然后，如果任何网格项目的最小内容贡献根据步骤 2 中计算的行大小和对齐方式发生了更改，则使用新的最小内容和最大内容贡献重新解析网格列的大小（仅一次）。

   要查找其内联轴大小贡献需要它的任何项目的块轴可用空间，请使用上一步中计算的网格行大小。如果网格容器的块大小是确定的，则还应用 align-content 来考虑有效的行间隙大小。

   当网格项目的内联大小取决于其网格区域的块大小时，此重复是必要的。示例包括换行的列弹性容器（flex-flow: column wrap）、正交流（writing-mode）、多列容器以及具有纵横比（或具有具有纵横比的子项）且其大小取决于行大小的项目。
4. 接下来，如果任何网格项目的最小内容贡献根据步骤 3 中计算的列大小和对齐方式发生了更改，则使用新的最小内容和最大内容贡献重新解析网格行的大小（仅一次）。

   要查找其块轴大小贡献需要它的任何项目的内联轴可用空间，请使用上一步中计算的网格列大小。如果网格容器的内联大小是确定的，则还应用 justify-content 来考虑有效的列间隙大小。

5. 最后，根据 align-content 和 justify-content 属性在网格容器内对齐轨道。

   注意：这可能会在轨道之间引入额外的空间，从而可能扩大跨越间隙的任何网格项目的网格区域，使其超出轨道大小调整期间分配的空间。

注意：子网格化维度中的轨道大小调整将该轴中给定轨道中的每个项目视为父网格的成员。这种交错要求网格大小调整按轴深入到子网格中，而不是在递归时完成两个轴。请注意，这意味着建立正交流的子网格的轨道大小调整顺序将与嵌套网格相反。

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

12.2. 轨道尺寸调整术语

最小轨道尺寸调整函数

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

最大轨道尺寸调整函数

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

可用网格空间

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

• 如果网格容器的大小是确定的，则使用其内容框的大小。

• 如果网格容器在最小内容约束或最大内容约束下确定大小，则可用网格空间是该约束（并且是不确定的）。

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

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

可用空间

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

跨度计数

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

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

12.3. 轨道尺寸调整算法

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

1. 初始化轨道尺寸
2. 解析固有轨道尺寸
3. 最大化轨道
4. 扩展弹性轨道
5. 扩展拉伸的 auto 轨道

12.4. 初始化轨道尺寸

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

一个固定尺寸调整函数

解析为一个绝对长度，并使用该尺寸作为轨道的初始基本尺寸。

注意：不确定长度不会出现，因为它们被视为 auto。

一个固有尺寸调整函数

使用零作为初始基本尺寸。

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

一个固定尺寸调整函数

解析为一个绝对长度，并使用该尺寸作为轨道的初始增长限制。

一个固有尺寸调整函数

一个弹性尺寸调整函数

使用无穷大作为初始增长限制。

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

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

12.5. 解析固有轨道尺寸

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

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

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

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

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

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

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

   注意：由于其自身大小取决于固有尺寸轨道大小的网格项目不参与基线对齐，因此不会对其进行调整。

2. 调整轨道尺寸以适应非跨越项目：对于每个具有固有轨道尺寸调整函数且不是弹性尺寸调整函数的轨道，考虑其中跨度为 1 的项目：

   对于最小内容最小值：

   如果轨道具有 min-content 最小轨道尺寸调整函数，则将其基本尺寸设置为项目的最小内容贡献的最大值，向下取整为零。

   对于最大内容最小值：

   如果轨道具有 max-content 最小轨道尺寸调整函数，则将其基本尺寸设置为项目的最大内容贡献的最大值，向下取整为零。

   对于自动最小值：

   如果轨道具有 auto 最小轨道尺寸调整函数，并且网格容器正在最小/最大内容约束下确定大小，则将轨道的基本尺寸设置为其项目的受限最小内容贡献的最大值，向下取整为零。项目的受限最小/最大内容贡献（为此目的）是其最小/最大内容贡献（相应地），受最大轨道尺寸调整函数（可能是fit-content() 轨道尺寸调整函数的参数）的限制（如果该函数是固定的），并最终受其最小贡献（定义如下）的限制。

   否则，将轨道的基本尺寸设置为其项目的最小贡献的最大值，向下取整为零。项目的最小贡献是它可以具有的最小外部尺寸。具体来说，如果项目的计算首选尺寸表现为 auto 或取决于其在相关轴上的包含块的大小，则其最小贡献是假设项目的已用最小尺寸作为其首选尺寸而产生的外部尺寸；否则，项目的最小贡献是其最小内容贡献。因为最小贡献通常取决于项目内容的大小，所以它被认为是固有尺寸贡献的一种类型。

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

   对于最小内容最大值：

   如果轨道具有 min-content 最大轨道尺寸调整函数，则将其增长限制设置为项目的最小内容贡献的最大值。

   对于最大内容最大值：

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

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

   注意：此步骤是下面处理跨越项目的步骤的简化，并且应产生与在跨度为 1 的项目上运行这些指令相同的行为。

3. 增加尺寸以容纳跨越内容尺寸轨道的跨越项目：接下来，考虑跨度为 2 且不跨越具有弹性尺寸调整函数的轨道的项目。
   1. 对于固有最小值：首先将额外空间分配给具有固有最小轨道尺寸调整函数的轨道的基本尺寸，以容纳这些项目的最小贡献。

      如果网格容器正在最小或最大内容约束下确定大小，则在此处使用项目的受限最小内容贡献代替其最小贡献。（对于跨越多个轨道的项目，用于计算其受限最小/最大内容贡献的上限是其跨越的任何轨道的固定最大轨道尺寸调整函数的总和，并且如果它仅跨越此类轨道，则应用该上限。）

   2. 对于基于内容的最小值：接下来继续将额外空间分配给具有最小轨道尺寸调整函数为 min-content 或 max-content 的轨道的基本尺寸，以容纳这些项目的最小内容贡献。
   3. 对于最大内容最小值：接下来，如果网格容器正在最大内容约束下确定大小，则继续将额外空间分配给具有最小轨道尺寸调整函数为 auto 或 max-content 的轨道的基本尺寸，以容纳这些项目的受限最大内容贡献。

      在所有情况下，继续将额外空间分配给具有最小轨道尺寸调整函数为 max-content 的轨道的基本尺寸，以容纳这些项目的最大内容贡献。

   4. 如果此时任何轨道的增长限制现在小于其基本尺寸，则将其增长限制增加到与其基本尺寸匹配。
   5. 对于固有最大值：接下来将额外空间分配给具有固有最大轨道尺寸调整函数的轨道的增长限制，以容纳这些项目的最小内容贡献。将在此步骤中增长限制从无限变为有限的任何轨道标记为下一步的无限可增长。
      为什么存在无限可增长标志？

      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 的轨道的增长限制，以容纳这些项目的最大内容贡献。

   对于具有更大跨度的项目，逐步重复，直到考虑了所有项目。

4. 增加尺寸以容纳跨越弹性轨道的跨越项目：接下来，重复上一步，改为（一起，而不是按跨度大小分组）考虑所有确实跨越具有弹性尺寸调整函数的轨道的项目，同时
   • 仅将空间分配给弹性轨道（即将所有其他轨道视为具有固定尺寸调整函数）
   • 如果项目跨越的所有弹性轨道的弹性尺寸调整函数之和大于或等于 1，则根据其弹性尺寸调整函数的比例将空间分配给此类轨道，而不是平均分配空间；如果总和小于 1，则根据其弹性尺寸调整函数的比例分配该比例的空间，其余部分平均分配
5. 如果任何轨道仍然具有无限的增长限制（例如，因为它没有放置任何项目，或者它是一个弹性轨道），则将其增长限制设置为其基本尺寸。

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

12.5.1. 在跨越轨道间分配额外空间

12.6. 最大化轨道

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

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

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

12.7. 扩展弹性轨道

此步骤使用它可以分配给fr的最大值来确定弹性轨道的大小，而不会超过可用空间。

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

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

已用弹性分数为零。

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

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

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

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

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

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

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

12.7.1. 查找 fr 的大小

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

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

12.8. 拉伸 auto 轨道

当内容分布属性在此轴上的值为 normal 或 stretch 时， 此步骤会通过将任何剩余的正的、确定的可用空间平均分配给 具有 auto 最大轨道尺寸函数的轨道， 从而扩展这些轨道。 如果可用空间是不确定的， 但网格容器具有确定的 min-width/height， 则改用该尺寸计算此步骤的可用空间。

13. 网格布局分片

网格容器可以跨页面 在行或列之间 以及项目内部进行分断。 break-* 属性适用于网格容器， 与它们所参与的格式化上下文中的通常情况相同。 本节定义了这些属性如何应用于网格项目 以及网格项目的内容。

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

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

• 网格项目上的 break-before 和 break-after 属性会传播到其网格行。 第一行上的 break-before 属性 和最后一行上的 break-after 属性 会传播到网格容器。
• 网格项目内部的强制分断实际上会增加其内容的尺寸； 它不会触发兄弟项目内部的强制分断。
• A 类分断机会出现在 行或列之间（取决于哪一个位于适当的轴上）， 而C 类分断机会出现在 第一行/最后一行（列）与网格容器的内容边缘之间。[CSS3-BREAK]
• 当网格容器在分断后继续时， 其网格 项目可用的空间（在分片上下文的块流方向上） 会减去之前页面上的网格容器片段所占用的空间。 网格容器片段所占用的空间 是其在该页面上的内容盒尺寸。 如果此调整导致可用空间变为负值， 则将其设置为零。
• 除了上一点所要求的项目重新排列之外， UA 应尝试相对于未分片流 尽量减少网格容器的变形。

13.1. 示例分片算法

本节是非规范性的。

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

1. 使用§ 12 网格 布局算法对网格进行布局，使用分片容器的行内尺寸，并假定块 尺寸不受限制。 在此步骤中，所有 grid-row 的 auto 和 fr 值都必须 被解析。
2. 使用上一步中解析出的值对网格容器进行布局。
3. 如果网格区域的尺寸因 分片而发生变化（在此判定中不包括跨 行的项目），则根据需要增加满足以下任一条件的网格行尺寸：
   • 具有基于内容的最小轨道尺寸函数。
   • 位于没有显式高度的网格中，并且该网格行是弹性的。
4. 如果网格高度为 auto，则网格的高度应为最终 行尺寸之和。
5. 如果某个网格区域由于分片期间外边距折叠而溢出网格容器， 则扩展网格容器以包含该网格区域（此步骤 是为了避免由分片造成的循环布局依赖所必需的）。

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

14. 隐私注意事项

网格布局未引入新的隐私泄露问题。

15. 安全注意事项

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

16. 变更

16.1. 自 2020 年 12 月 18 日 CR 以来的变更

• 阐明了相对定位如何应用于子网格。 (问题 7123)

  • 相对定位正常应用于子网格，并像往常一样一起移动框及其内容。 （注意：相对定位在对齐之后进行，并且不影响轨道尺寸调整。）

• 阐明了在计算子网格本身的贡献时（不仅仅是在考虑其子项时），滚动条边距与外边距/边框/内边距一起计算。 (问题 9935)

  对于非空子网格的每个边缘，为了在该边缘考虑子网格的外边距/边框/内边距（以及任何滚动条边距），……并且在该边缘额外地由子网格自身的外边距/边框/内边距/边距扩大。

• 还整合了 CSS 网格级别 1 自上次发布以来的所有变更。

16.2. 自 2020 年 8 月 CR 以来的变更

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

自 2019 年 12 月 CSS 网格布局级别 2 工作草案以来的变更

无，除了整合了 CSS 网格级别 1 的全文。

有关先前的变更，请参阅工作草案期间的变更。

16.3. 自级别 1 以来的新增内容

自级别 1以来已添加以下功能：

• 子网格 (subgrid)

17. 致谢

非常感谢 Mozilla 的 Mats Palmgren，没有他的支持和反馈，子网格功能将无法推进。还要感谢 Daniel Tonon，他坚持在子网格中间隙的智能处理，并贡献了插图；以及 Rachel Andrew 和 Jen Simmons，她们帮助弥合了 CSS 工作组与 Web 设计/创作社区之间的反馈差距。

最后，CSS 网格级别 2 的致谢部分若不提及所有使CSS 网格级别 1 这项艰巨任务成为可能的人，那将是不完整的。