CSS 网格布局模块第 1 级

如果您注意到本网格布局模块与 弹性盒布局模块 (Flexible Box Layout Module) 之间存在任何不一致之处，请向 CSSWG 反馈，因为这很可能是一个错误。

1. 简介

本节不具有规范性。

网格布局 (Grid Layout) 是一种新的 CSS 布局模型，具有控制盒模型及其内容尺寸和定位的强大能力。与面向单轴的 弹性盒布局 (Flexible Box Layout) 不同，网格布局针对二维布局进行了优化：即在两个维度上都需要内容对齐的布局。

此外，由于其能够在网格中显式定位项目，网格布局允许在不更改相应标记的情况下实现视觉布局结构的巨大转变。通过将 媒体查询 (Media Queries) 与控制网格容器及其子元素布局的 CSS 属性相结合，作者可以使其布局适应设备外形、方向和可用空间的变化，同时在不同展示环境下保持内容更理想的语义结构。

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

1.1. 背景与动机

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

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

1.1.1. 使布局适应可用空间

网格布局可用于智能地调整网页内的元素尺寸。相邻的图形代表了一个布局中有五个主要组件的游戏：游戏标题、统计区域、游戏面板、分数区域和控制区域。作者的意图是划分游戏空间，使得

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

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

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

/* Specify the position of each grid item using coordinates on
 * the 'grid-row' and 'grid-column' properties of each grid item.
 */
#title    { grid-column: 1; grid-row: 1; }
#score    { grid-column: 1; grid-row: 3; }
#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#board    { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

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

1.1.2. 与源码顺序无关性

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

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

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

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

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

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

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

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

/* The grid-area property places a grid item into a named
 * area of the grid. */
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

注意： 网格布局的重排能力有意地仅影响视觉渲染，而保留基于源码顺序的语音顺序和导航。这允许作者操纵视觉呈现，同时保持源码顺序完整，并针对非 CSS 用户代理及语音和顺序导航等线性模型进行优化。

网格项目的放置和重排绝不能替代正确的源码排序，因为这会破坏文档的可访问性。

1.2. 值定义

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

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 全局关键字 作为其属性值。为了可读性，未明确重复列出。

2. 概述

本节不具有规范性。

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

• 固定、灵活和基于内容的 轨道尺寸函数
• 通过正向（正数）和反向（负数）数值网格坐标、命名网格线和命名网格区域进行 显式项目放置；自动将项目放置到空白区域，包括 使用 order 进行重排
• 空间敏感的轨道重复，以及为适应额外内容而自动添加行或列
• 通过 外边距、排水沟（间隔） 和 对齐属性 控制对齐和间距
• 重叠内容并 使用 z-index 控制图层 的能力

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

2.1. 定义网格

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

2.2. 放置项目

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

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

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

grid-area: a;
/* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */

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

2.3. 设置网格尺寸

一旦 网格项目 被 放置，网格轨道（行和列）的尺寸将根据其内容尺寸和/或网格定义中指定的可用空间进行计算。

产生的已定尺寸网格根据 网格容器 的 align-content 和 justify-content 属性在 网格容器 内进行 对齐。§ 10 对齐与间距

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. 网格布局概念与术语

在 网格布局 (grid layout) 中，网格容器 的内容是通过将其定位和对齐到一个 网格 中来布置的。网格 (grid) 是一组相交的水平和垂直 网格线 (grid lines)，将 网格容器 的空间划分为 网格区域 (grid areas)，网格项目 (grid items)（代表 网格容器 的内容）可以放置在这些区域中。有两组 网格线：一组定义沿 块轴 (block axis) 运行的 列 (columns)，另一组定义沿 内联轴 (inline axis) 的正交集合，定义 行 (rows)。[CSS3-WRITING-MODES]

3.1. 网格线

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

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

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

/* equivalent layout to the prior example, but using named lines */
#grid {
  display: grid;
  grid-template-columns: 150px [item1-start] 1fr [item1-end];
  grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
}

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

3.2. 网格轨道与单元格

网格轨道 (Grid track) 是 网格列 或 网格行 的通用术语——换句话说，它是两条相邻 网格线 之间的空间。每个 网格轨道 都分配有一个尺寸函数，该函数控制列或行可以增长的宽度或高度，从而决定其边界 网格线 的间距。相邻的 网格轨道 可以由 排水沟（间隔） 分隔，否则它们将紧密排列。

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

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

3.3. 网格区域

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

/* using the template syntax */
#grid  {
  display: grid;
  grid-template-areas: ". a"
                       "b a"
                       ". a";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
  height: 100vh;
}

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

/* Align items 2 and 3 at different points in the grid area "b".  */
/* By default, grid items are stretched to fit their grid area    */
/* and these items would layer one over the other. */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

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

4. 重排与无障碍访问

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

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

注意： 这是为了使非视觉媒体和非 CSS 用户代理（通常按线性呈现内容）能够依赖逻辑源码顺序，同时利用网格布局的放置和排序功能来定制视觉排列。（由于视觉感知是二维且非线性的，预期的视觉顺序并不总是等同于预期的阅读顺序。）

许多网页在标记中具有相似的形状，顶部有页眉，底部有页脚，中间有内容区域和一或两个额外列。通常，希望内容出现在页面源码中，位于额外列之前。然而，这使得许多常见设计（例如简单地将额外列放在左侧而内容区域放在右侧）难以实现。多年来，这以多种方式得到了解决，当存在两列额外列时，通常称为“圣杯布局 (Holy Grail Layout)”。网格布局使得此示例变得微不足道。例如，以以下页面代码和预期布局的草图为例

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

这种布局可以轻松地通过网格布局实现

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

作为额外的奖励，默认情况下列都将是 等高 的，且主要内容将根据需要尽可能宽以填满屏幕。此外，这还可以与媒体查询相结合，以在窄屏幕上切换到全垂直布局。

@media all and (max-width: 60em) {
  /* Too narrow to support three columns */
  body { display: block; }
}

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

5. 网格容器

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

grid

此值会导致元素生成一个 网格容器 盒，当放置在 流式布局 (flow layout) 中时，它是 块级 (block-level) 的。

inline-grid

此值会导致元素生成一个 网格容器 盒，当放置在 流式布局 中时，它是 内联级 (inline-level) 的。

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

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

• 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] 获取本节术语的定义。

网格容器 是根据其参与的格式化上下文的规则来设置尺寸的：

• 作为 块级 (block-level) 盒，在 块格式化上下文 中，其尺寸计算方式与建立格式化上下文的 块盒 (block box) 相同，其中 auto 内联尺寸 (inline size) 的计算方式与非替换块盒相同。
• 作为 内联格式化上下文 中的内联级盒，其尺寸被设置为原子内联级盒（例如 inline-block）。

在内联和块格式化上下文中，网格容器 的 auto 块尺寸 (block size) 是其 max-content 尺寸。

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

网格容器 的 max-content 尺寸（min-content 尺寸）是当网格在 max-content 约束（min-content 约束）下设置尺寸时，相应轴中 网格容器 的轨道尺寸（包括排水沟/间隔）的总和。

5.3. 可滚动网格溢出

overflow 属性适用于 网格容器。

正如其包含在固有尺寸调整中一样（参见 § 5.2 设置网格容器尺寸），网格 也包含在 网格容器 的 可滚动溢出区域 (scrollable overflow region) 中。

注意： 当 网格容器 是 滚动容器 (scroll container) 时，需注意与内边距的交互：定义额外的内边距应根据需要添加到 可滚动溢出矩形 (scrollable overflow rectangle) 中，以启用可滚动内容的 place-content: end 对齐。请参阅 CSS Overflow 3 § 2.2 可滚动溢出

5.4. 限制大型网格

由于内存有限，用户代理 (UA) 可能会将 隐式网格 的可能尺寸限制在用户代理定义的限制内（通常应涵盖 [-10000, 10000] 范围内的线），并丢弃该限制之外的所有线。如果一个网格项目被放置在此限制之外，其网格区域必须被 夹紧 (clamped) 到此受限网格内。

要 夹紧一个网格区域

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

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

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

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

6. 网格项目

粗略地说，网格容器 的 网格项目 (grid items) 是代表其 流内 (in-flow) 内容的盒。

网格容器 的每个 流内 子元素都成为一个 网格项目，每个子 文本序列 都被包装在一个 匿名 (anonymous) 块容器 (block container) 网格项目 中。但是，如果 文本序列 仅包含 空白字符（即受 white-space 属性影响的字符），它反而不会被渲染（就像其 文本节点 为 display:none 一样）。

<div style="display: grid">

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

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

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

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

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

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

6.1. 网格项目显示

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

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

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

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

6.2. 网格项目尺寸

网格项目 在其 网格区域 定义的包含块内设置尺寸。

给定维度中 自动尺寸 (automatic sizes) 的 网格项目 计算因其 自对齐值 (self-alignment values) 而异

normal

如果网格项目没有 首选宽高比 (preferred aspect ratio)，且在相关轴上没有 自然尺寸 (natural size)（如果是 替换元素），则网格项目尺寸计算方式与 align-self: stretch 相同。

否则，网格项目根据相应轴的块级元素尺寸计算规则保持一致。（请参阅 CSS 2 § 10 视觉格式化模型细节。）

stretch

使用非替换盒的 内联尺寸 计算规则（定义在 CSS 2 § 10.3.3 正常流中的块级非替换元素），即 拉伸拟合尺寸 (stretch-fit size)。

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

所有其他值

将该项目尺寸调整为 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. 网格项目的外边距与内边距

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

网格项目 上的百分比外边距和内边距，像 块盒 上的百分比一样，是根据其 包含块 的 内联尺寸 进行解析的，例如在水平 书写模式 (writing modes) 中，左/右/上/下百分比都根据其 包含块 的 宽度 进行解析。

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

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

网格项目 在定位到相交的 网格区域 时，甚至由于负外边距或定位而放置在不相交区域时，都可能会重叠。网格项目 的绘制顺序与内联块完全相同 [CSS2]，只是使用 order 修改后的文档顺序 代替原始文档顺序，并且除 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 Intrinsic and Extrinsic Sizing) [CSS-SIZING-3] 中定义。

为了给 网格项目 提供更合理的默认 最小尺寸 (minimum size)，其 自动最小尺寸 (automatic minimum size) 在给定轴上的使用值是 基于内容的最小尺寸 (content-based minimum size)，如果满足以下所有条件：

• 其 计算后 overflow 不是 可滚动溢出值

• 它在该轴上跨越至少一个 轨道，该轨道的 最小轨道尺寸函数 (min track sizing function) 为 auto

• 如果它在该轴上跨越多个轨道，则这些轨道中没有一个是 灵活的 (flexible)

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

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

网格项目 在给定维度上的 基于内容的最小尺寸 (content-based minimum size) 是其 指定尺寸建议 (specified size suggestion)（如果存在），否则是其 转换尺寸建议 (transferred size suggestion)（如果存在且元素是 替换元素），否则是其 内容尺寸建议 (content size suggestion)（见下文）。但是，如果 网格项目 在给定维度上仅跨越具有 固定 (fixed) 最大轨道尺寸函数 (max track sizing function) 的 网格轨道，则其在该维度上的 指定尺寸建议 和 内容尺寸建议（以及其从该维度输入到相反维度 转换尺寸建议 的输入）进一步被夹紧为小于或等于 拉伸拟合 (stretch fit) 到 网格区域 在该维度上的最大尺寸，该最大尺寸由这些 网格轨道 的 最大轨道尺寸函数 加上任何中间的 固定 排水沟（间隔） 之和表示。

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

注意：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 属性。如果这些属性没有定义任何显式轨道，则显式网格在每个轴上仍包含一条网格线。

网格定位属性中的数字索引是从显式网格的边缘开始计数的。正索引从起始 (start)侧计数（起始最靠前的显式线从 1 开始），而负索引从结束 (end)侧计数（结束最靠前的显式线从 -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() 符号指定为一个范围，该范围可以结合上述任何机制，分别为列或行指定最小和最大轨道尺寸函数。

轨道列表的语法如下

<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 factor)。每个 <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(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);

/* examples of valid track definitions */
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;
/* same as above, except easier to write */
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 作为重复次数时，如果网格容器在相关轴上有确定的首选尺寸或最大尺寸，则重复次数是不会导致网格溢出其网格容器的内容框（考虑 gap）的最大可能正整数；如果任何次数的重复都会导致溢出，则为 1 次重复。否则，如果网格容器在相关轴上有确定的最小尺寸，则重复次数是满足该最小要求的最小可能正整数。否则，指定的轨道列表仅重复一次。

出于此目的，每个轨道被视为其最大轨道尺寸函数（如果该函数是确定的），否则视为其最小轨道尺寸函数（如果该函数是确定的）。如果两者都是确定的，则以最小轨道尺寸函数为底，对最大轨道尺寸函数进行限制。如果两者都不确定，则重复次数为 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> * <剩余空间> / <所有弹性系数之和>。

当可用空间无限时（当网格容器的宽度或高度是不确定的时会发生），以弹性大小调整的网格轨道将根据其内容进行调整大小，同时保持其各自的比例。每个弹性大小轨道的使用尺寸是通过确定每个弹性轨道的大小 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() 符号。
• 每个轨道尺寸作为以像素为单位的长度给出，无论其尺寸函数如何。
• 相邻的线名称合并为单个括号内的集合。

const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// Code like this should be a no-op,
// but if there are any implicit rows,
// this will convert them into explicit rows,
// possibly changing how grid items are positioned
// and altering the overall size of the grid!

否则（例如当元素具有 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（无）

表明此属性不会定义任何命名网格区域，同样也不会定义任何显式网格轨道（尽管显式网格轨道仍可能由 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;

并创建以下网格

注意：请注意，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 属性指定未由 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

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

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

注意：本模块的未来级别预计将增加一个值，将自动定位的项目合并流入单个“默认”单元格中。

自动放置（Auto-placement）按 网格项 的 修正后的文档顺序 进行处理。

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

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

<style type="text/css">
form {
  display: grid;
  /* Define three columns, all content-sized,
     and name the corresponding lines. */
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  /* Place all labels in the "labels" column and
     automatically find the next available row. */
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  /* Place all controls in the "controls" column and
     automatically find the next available row. */
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* Auto place this item in the "oversized" column
     in the first row where an area that spans three rows
     won’t overlap other explicitly placed items or areas
     or any items automatically placed prior to this area. */
  grid-column: oversized;
  grid-row: span 3;
}

/* Place all the buttons of the form
   in the explicitly defined grid area. */
#buttons {
  grid-row: auto;

  /* Ensure the button area spans the entire grid element
     in the inline axis. */
  grid-column: 1 / -1;
  text-align: end;
}
</style>
<form>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
  <label for="address2">Address 2:</label>
  <input type="text" id="address2" name="address2">
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <label for="state">State:</label>
  <select type="text" id="state" name="state">
    <option value="WA">Washington</option>
  </select>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" name="zip">

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

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

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

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

其语法与 grid-template 匹配，并额外增加了一种用于定义自动流 (auto-flow) 网格的语法形式。

<'grid-template'>

将 grid-template 的长属性设置为与 grid-template 相同，并将 grid-auto-* 的长属性设置为它们的初始值。

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

通过在一个轴上显式设置轨道（将 grid-template-rows 或 grid-template-columns 设置为指定值，并将另一个设置为 none），并指定如何在另一个轴上自动重复轨道（将 grid-auto-rows 或 grid-auto-columns 设置为指定值，并将另一个设置为 auto）来设置自动流。同时，grid-auto-flow 也会相应地设置为 row 或 column，如果指定了 dense，则会包含该关键字。

所有其他的 grid 子属性都会重置为它们的初始值。

注意： 请注意，在单个 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）决定了它们的实际位置。一个 网格项 所占据的单元格也会影响网格行和列的大小，这在 § 11 网格布局算法 中有定义。

一个 网格项 的 网格区域 在 网格 中的位置由其 放置 (placement) 定义，该放置由一个 网格位置 和一个 网格跨度 组成。

网格位置

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

网格跨度

网格项 在每个轴上占据多少个 网格轨道。在 Level 1 中，网格项 的 网格跨度 总是 确定性的，如果在该轴上无法以其他方式确定，则默认在该轴上跨度为 1。

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

在给定维度中，对于 Start（起始）、End（结束）和 Span（跨度）中的任意两个指定确定值，即隐含了第三个值的确定性。

下表总结了网格位置或跨度为 确定性 (definite) 或 自动 (automatic) 的条件。

8.1. 网格放置的常见模式

本节是资料性的。

网格放置属性的长属性被组织为三个简写属性。

8.1.1. 命名区域 (Named Areas)

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

article {
  grid-area: main;
  /* Places item into the named area "main". */
}

项也可以 部分地 与 命名网格区域 对齐，而其他边缘则与其他线条对齐。

.one {
  grid-row-start: main;
  /* Align the row-start edge to the start edge of the "main" named area. */
}

8.1.2. 数字索引和跨度 (Numeric Indexes and Spans)

网格项可以通过数字进行定位和设置大小，这对于脚本驱动的布局特别有帮助。

.two {
  grid-row: 2;    /* Place item in the second row. */
  grid-column: 3; /* Place item in the third column. */
  /* Equivalent to grid-area: 2 / 3; */
}

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

.three {
  grid-row: 2 / span 5;
  /* Starts in the 2nd row,
     spans 5 rows down (ending in the 7th row). */
}

.four {
  grid-row: span 5 / 7;
  /* Ends in the 7th row,
     spans 5 rows up (starting in the 2nd row). */
}

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

8.1.3. 命名线和跨度 (Named Lines and Spans)

线条无需通过数字计数，可以按其 线条名称 进行引用。

.five {
  grid-column: first / middle;
  /* Span from line "first" to line "middle". */
}

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

如果存在多条同名的线条，它们实际上建立了一个命名的网格线集合，可以通过按名称过滤放置来专门索引这些线条。

.six {
  grid-row: text 5 / text 7;
  /* Span between the 5th and 7th lines named "text". */
  grid-row: text 5 / span text 2;
  /* Same as above - start at the 5th line named "text",
     then span across two more "text" lines, to the 7th. */
}

8.1.4. 自动放置 (Auto Placement)

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

.eight {
  grid-area: auto; /* Initial value */
}

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

如果项需要占用多个单元格，自动放置可以与显式跨度结合使用。

.nine {
  grid-area: span 2 / span 3;
  /* Auto-placed item, covering two rows and three columns. */
}

自动放置算法 是横向搜索并增加行，还是纵向搜索并增加列，由 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 属性通过为 网格项 的 网格放置 提供一条线、一个跨度或什么都不提供（自动），从而确定 网格 中网格项的大小和位置，进而指定其 网格区域 的 内联起始 (inline-start)、块起始 (block-start)、内联结束 (inline-end) 和 块结束 (block-end) 边缘。

值的含义如下：

<custom-ident>

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

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

否则，将其视为好像指定了整数 1 以及 <custom-ident> 一样处理。

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

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

如果名称以 <custom-ident> 的形式给出，则仅对具有该名称的线条进行计数。如果具有该名称的线条不足，则假设所有 隐式网格线 为了找到此位置的目的都具有该名称。

值为 0 的 <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;
/* Line 4 to line 5 */

grid-column-start: auto; grid-column-end: 6;
/* Line 5 to line 6 */

grid-column-start: C; grid-column-end: C -1;
/* Line 3 to line 9 */

grid-column-start: C; grid-column-end: span C;
/* Line 3 to line 6 */

grid-column-start: span C; grid-column-end: C -1;
/* Line 6 to line 9 */

grid-column-start: span C; grid-column-end: span C;
/* Error: The end span is ignored, and an auto-placed
   item can’t span to a named line.
   Equivalent to ''grid-column: span 1;''. */

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

grid-column-start: 5; grid-column-end: span C;
/* Line 5 to line 6 */

grid-column-start: 8; grid-column-end: 8;
/* Error: line 8 to line 9 */

grid-column-start: B 2; grid-column-end: span 1;
/* Line 5 to line 6 */

8.3.1. 网格放置冲突处理

如果 网格项 的 放置位置 包含两条线，且 起始 (start) 线比 结束 (end) 线更靠近结束方向，则交换这两条线。如果 起始 线 等于 结束 线，则移除 结束 线。

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

如果 放置位置 仅包含一个命名线的跨度，则将其替换为跨度 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。

注意： 此简写属性的解析顺序为 行起始/列起始/行结束/列结束，这对于 LTR 页面是 逆时针 的，与使用物理方向（如 margin）的相关 4 边缘属性的方向相反。

8.5. 网格项放置算法

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

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

每个 网格单元（在 显式 和 隐式网格 中）都可以是 已占用 (occupied) 或 未占用 (unoccupied)。如果一个单元格被具有 确定性网格位置 的 网格项 的 网格区域 覆盖，则该单元格被视为 已占用；否则，该单元格为 未占用。单元格的 已占用/未占用 状态可以在此算法执行过程中更改。

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

注意： 自动放置算法 使用 修正后的文档顺序 处理 网格项，而不是它们的原始文档顺序。

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

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

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

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

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

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

   “密集 (dense)”打包（指定了 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 值决定了如何定位这些项。

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

   对于每个尚未在上一步中定位的 网格项，按 修正后的文档顺序 处理：

   如果该项具有 确定性列位置

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

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

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

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

   1. 增加 自动放置光标 的列位置，直到该项的 网格区域 不与任何 已占用 网格单元重叠，或者 光标 的列位置加上该项的列跨度超过了隐式网格中的列数（如该算法早期所确定）。

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

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

   对于每个尚未在上一步中定位的 网格项，按 修正后的文档顺序 处理：

   如果该项具有 确定性列位置

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

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

   3. 将该项的行起始线索引设置为 光标 的行位置。（同时也根据跨度隐含地设置了该项的行结束线。）

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

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

   2. 增加 自动放置光标 的列位置，直到该项的 网格区域 不与任何 已占用 网格单元重叠，或者 光标 的列位置加上该项的列跨度超过了隐式网格中的列数（如该算法早期所确定）。

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

9. 绝对定位 (Absolute Positioning)

9.1. 以网格容器为包含块

如果绝对定位元素的 包含块 是由 网格容器 生成的，则该包含块对应于由其 网格放置属性 决定的 网格区域。偏移属性（top/right/bottom/left）随后表示从该 包含块 的相应边缘向内的偏移，这与常规情况相同。

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

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* 4 equal-height rows filling the grid container,
     4 columns of ''10rem'' each */
  justify-content: center;
  /* center the grid horizontally within the grid container */
  position: relative;
  /* Establish abspos containing block */
}

.abspos {
  grid-row-start: 1;     /* 1st grid row line = top of grid container */
  grid-row-end: span 2;  /* 3rd grid row line */
  grid-column-start: 3;  /* 3rd grid col line */
  grid-column-end: auto; /* right padding edge */
  /* Containing block covers the top right quadrant of the grid container */

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

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

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

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

绝对定位发生在 网格 及其 流内 (in-flow) 内容布局之后，并且不会影响任何网格轨道的大小，也不会以任何方式影响网格的大小/配置。如果一个 网格放置属性 引用了一条不存在的线（无论是显式指定了这样的线，还是通过跨越到现有的 隐式网格 之外），它都会被视为指定了 auto（而不是创建新的 隐式网格线）。

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

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

9.2. 以网格容器为父元素

网格容器 的绝对定位子元素是 流外 (out-of-flow) 的，不是 网格项，因此不会影响其他项的放置或网格的大小。

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

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

10. 对齐与间距 (Alignment and Spacing)

在 网格容器 的 网格轨道 确定大小，且所有 网格项 的维度最终确定后，网格项 可以在其 网格区域 内进行对齐。

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

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

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

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

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

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

如果 网格 在轨道之间被 分割 (fragmented)，则这些轨道之间的 间距 必须被抑制。注意，不同于 margin，即使在强制中断后，间距也会被抑制。

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

当 折叠轨道 的间距 发生塌陷 (collapse) 时，它们正好重合——两个间距重叠，使得它们的起始和结束边缘重合。如果 折叠 轨道的一侧没有间距（例如，如果它是 隐式网格 的第一条或最后一条轨道），那么折叠其间距会导致 折叠轨道 的任何“一侧”都没有间距。

10.2. 与 auto margin 对齐

网格项 上的 Auto margin 的作用与 块布局 中的 auto margin 非常相似。

• 在计算 网格轨道 大小期间，auto margin 被视为 0。
• 按照 块布局 的 内联轴 (inline axis) 定义（参见 CSS2§10.3.3），任一轴上的 auto margin 会在通过 盒对齐属性 进行对齐之前吸收正向自由空间，从而在该轴上禁用任何 自我对齐属性 的效果。
• 溢出的 网格项 将其 auto margin 解析为 0，并按照其 盒对齐属性 指定的方式进行溢出。

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

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

如果在一个基线对齐轴向上，其尺寸取决于某个固有尺寸轨道（该轨道尺寸反过来又依赖于该网格项的尺寸和基线对齐，从而形成循环依赖）的网格项上指定了基线对齐，则该项不参与基线对齐，而是使用其回退对齐，就好像该回退对齐是最初指定的一样。为此，当网格容器在相关轴向上具有不确定尺寸时，<flex> 轨道尺寸将被视为“固有尺寸”。

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

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

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

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

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-row / 4-column grid container */ grid: repeat(3, auto) / repeat(4, auto); gap: 10px; align-content: space-around; justify-content: space-between; } .item1 { grid-column: 1 / 5; } .item2 { grid-column: 1 / 3; grid-row: 2 / 4; } .item3 { grid-column: 3 / 5; } /* last two items auto-place into the last two grid cells */

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

10.6. 网格容器基线

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

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

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

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

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

网格修改后的文档顺序（网格顺序）是遍历网格的网格单元时遇到网格项的顺序。如果同时遇到两个项，则按顺序修改后的文档顺序获取它们。

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

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

有关基线的更多信息，请参见 CSS 写作模式 3 § 4.1 基线简介 和 CSS 盒对齐 3 § 9 基线对齐细节。

11. 网格布局算法

本节定义了网格布局算法，该算法对网格容器进行尺寸调整，确定所有网格轨道的尺寸和位置，并布局已放置到其网格区域中的网格项。

1. 运行网格项放置算法来解析网格中所有网格项的放置。

2. 根据§ 5.2 网格容器尺寸调整找到网格容器的尺寸。

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

3. 给定生成的网格容器尺寸，运行网格尺寸调整算法来调整网格尺寸。

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

4. 将网格项布局到它们各自的包含块中。为此，每个网格区域的宽度和高度被认为是确定的。

   注：由于仅使用确定尺寸计算的公式（如拉伸拟合公式）也是确定的，因此被拉伸的网格项的尺寸也被认为是确定的。

11.1. 网格尺寸调整算法

本节定义了网格尺寸调整算法，它决定所有网格轨道及延伸开来的整个网格的尺寸。

每个轨道都有指定的最小和最大尺寸函数（可能相同）。每个尺寸函数要么是：

• 一个固定尺寸函数（<length> 或可解析的 <percentage>）。
• 一个固有尺寸函数（min-content, max-content, auto, fit-content()）。
• 一个伸缩尺寸函数（<flex>）。

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

1. 首先，轨道尺寸调整算法用于解析网格列的尺寸。如果在此步骤中计算网格项的布局取决于块轴上的可用空间，请假设该可用空间为：如果有任何行具有确定的最大轨道尺寸函数，则该行具有该尺寸，所有其他行均为无限。如果网格容器和所有轨道都具有确定的尺寸，同时应用 align-content 来查找此类项跨越的任何间隙的最终有效尺寸；否则在此估计中忽略轨道对齐的影响。
   是否有启发式方法可以尝试更准确的初始估计？例如，假设其可用空间为以下各项的最大值：
2. 它跨越的所有确定轨道尺寸之和（使用轨道的最小和最大尺寸函数中的最大值，如果两者都是确定的，则使用 fit-content() 的参数（如果它是确定的））。
3. 该项的 min-content 尺寸（如果它跨越的任何轨道具有 min-content 或 fit-content() 尺寸函数）。
4. 该项的 自动最小尺寸（如果它跨越的任何轨道具有 auto 最小尺寸函数）。
5. 无限（如果它跨越的任何轨道具有 max-content 最小尺寸函数，或者 max-content、auto 或 <flex> 最大尺寸函数）。

   这或许可以减少所需的重新布局次数，但在任何情况下是否会产生不同或更好的结果？我们是否应该将其采纳到规范中？

6. 接下来，轨道尺寸调整算法解析网格行的尺寸。要找到任何其块轴尺寸贡献需要它的项的行内轴可用空间，请使用上一步中计算的网格列尺寸。如果网格容器的行内尺寸是确定的，同时应用 justify-content 来考虑有效的列间隙尺寸。
7. 然后，如果任何网格项的 min-content 贡献根据步骤 2 中计算的行尺寸和对齐方式发生了变化，请使用新的 min-content 和 max-content 贡献重新解析网格列的尺寸（仅限一次）。要找到任何其行内轴尺寸贡献需要它的项的块轴可用空间，请使用上一步中计算的网格行尺寸。如果网格容器的块尺寸是确定的，同时应用 align-content 来考虑有效的行间隙尺寸。
   这种重复对于网格项的行内尺寸取决于其网格区域的块尺寸的情况是必要的。示例包括换行的列伸缩容器（flex-flow: column wrap）、正交流（writing-mode）、多列容器以及尺寸取决于行尺寸的具有长宽比的项（或其子项具有长宽比）。
8. 接下来，如果任何网格项的 min-content 贡献根据步骤 3 中计算的列尺寸和对齐方式发生了变化，请使用新的 min-content 和 max-content 贡献重新解析网格行的尺寸（仅限一次）。要找到任何其块轴尺寸贡献需要它的项的行内轴可用空间，请使用上一步中计算的网格列尺寸。如果网格容器的行内尺寸是确定的，同时应用 justify-content 来考虑有效的列间隙尺寸。
9. 最后，根据 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。

在所有情况下，如果网格容器的最小/最大宽度/高度属性是确定的，请根据这些属性限制可用网格空间。

自由空间

等于可用网格空间减去所有网格轨道（包括间隙）的基准尺寸之和，以零为下限。如果可用网格空间是不确定的，则剩余空间也不确定。

跨度计数

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

注：请记住，为了网格尺寸调整算法的目的，间隙被视为固定尺寸轨道——即最小和最大尺寸函数都设置为间隙已用尺寸的轨道。它们的宽度需要相应地纳入轨道尺寸调整算法的计算中。

11.3. 轨道尺寸调整算法

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

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

11.4. 初始化轨道尺寸

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

一个固定尺寸函数

解析为绝对长度，并将该尺寸用作轨道的初始基准尺寸。注：不确定长度不会出现，因为它们被视为 auto。

一个固有尺寸函数

使用初始基准尺寸为零。

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

一个固定尺寸函数

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

一个固有尺寸函数

一个伸缩尺寸函数

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

在所有情况下，如果增长限制小于基准尺寸，则增加增长限制以匹配基准尺寸。

注：为了轨道尺寸调整算法的目的，间隙被视为空的固定尺寸轨道。

11.5. 解析固有轨道尺寸

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

注：当此步骤完成时，所有固有基准尺寸和增长限制都已解析为绝对长度。

注：记住 fit-content() 和 auto 最大轨道尺寸函数被视为与 max-content 相同，除非另有明确说明。

1. 对基线对齐的项进行填充（Shim），使其固有尺寸贡献反映其基线对齐。对于每个基线共享组中的项，在每个项的起始/结束侧（针对第一个/最后一个基线对齐）添加一个“填充”（实际上是额外的外边距），以便在进行起始/结束对齐时，它们的基线按规定对齐。在下方的轨道尺寸调整中，将这些“填充”视为项的固有尺寸贡献的一部分。如果一个项使用多个固有尺寸贡献，它可以为每个贡献拥有不同的填充。
   例如，当网格容器具有不确定尺寸时，它首先在 min/max-content 约束下布局以找到尺寸，然后以该尺寸“真正”布局（这可能会影响百分比轨道等）。为每个阶段添加的“填充”是独立的，并且仅影响该阶段的布局。

   注：注意基线自对齐和基线内容对齐的项在此步骤中都会被考虑。

   注：由于自身尺寸取决于固有尺寸轨道尺寸的网格项不参与基线对齐，因此它们不会被填充。

2. 调整轨道尺寸以适应不跨越的项：对于每个具有固有轨道尺寸函数且没有伸缩尺寸函数的轨道，考虑其中跨度为 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 的项，其结果应与运行那些指令的行为相同。

3. 增加尺寸以适应跨越固有尺寸轨道的跨度项：接下来，考虑跨度为 2 且不跨越具有伸缩尺寸函数的轨道的项。
4. 针对固有最小值：首先分配额外空间给具有固有最小轨道尺寸函数的轨道的基准尺寸，以适应这些项的最小贡献。如果网格容器正在min-或max-content 约束下调整尺寸，请在此处使用项的受限 min-content 贡献代替其最小贡献。（对于跨越多个轨道的项，计算其受限 min-/max-content 贡献时使用的上限是其跨越的任何固定最大轨道尺寸函数的总和，且仅在它仅跨越此类轨道时应用。）
5. 针对基于内容的最小值：接下来继续分配额外空间给具有 min-content 或 max-content 最小轨道尺寸函数的轨道的基准尺寸，以适应这些项的 min-content 贡献。
6. 针对 max-content 最小值：接下来，如果网格容器正在max-content 约束下调整尺寸，请继续分配额外空间给具有 auto 或 max-content 最小轨道尺寸函数的轨道的基准尺寸，以适应这些项的受限 max-content 贡献。在所有情况下，继续分配额外空间给具有 max-content 最小轨道尺寸函数的轨道的基准尺寸，以适应这些项的 max-content 贡献。
7. 如果此时任何轨道的增长限制现在小于其基准尺寸，则增加其增长限制以匹配其基准尺寸。
8. 针对固有最大值：接下来分配额外空间给具有固有最大轨道尺寸函数的轨道的增长限制，以适应这些项的 min-content 贡献。在下一步中，将任何增长限制从无限变为有限的轨道标记为无限可增长。
   为什么要存在无限可增长标记？

   Peter Salas 解释道：:

   Consider the following case:
   
   Two "auto" tracks (i.e. ''minmax(min-content, max-content) minmax(min-content, max-content)'').
   Item 1 is in track 1, and has min-content = max-content = 10.
   Item 2 spans tracks 1 and 2, and has min-content = 30, max-content = 100.
   
   After resolving min-content/max-content for the first item, we have this.
   
   track 1: base size = 10 growth limit = 10
   
   track 2: base size = 0 growth limit = infinity
   
   Then we resolve min-content/max-content for the second item.
   
   Phase 1 sets the base size of track 2 to 20 so that the two tracks' base sizes sum to 30.
   Phase 2 does nothing because there are no relevant tracks.
   Phase 3 sets the growth limit of track 2 to 20 so that the two tracks' growth limits sum to 30.
   In phase 4, we need to grow the sum of the growth limits by 70 to accommodate item 2.
   Two options are:
   
   1. Grow each track’s growth limit equally,
     and end up with growth limits = [45, 55].
   2. Grow only the second track’s growth limit,
     and end up with growth limits = [10, 90].
   
   By not considering the just-set growth limit as a constraint during space distribution
   (i.e. by treating it as infinity),
   we get the second result,
   which we considered a better result because the first track remains sized exactly to the first item.
   

9. 针对 max-content 最大值：最后继续分配额外空间给具有 max-content 最大轨道尺寸函数的轨道的增长限制，以适应这些项的 max-content 贡献。

对跨度更大的项递增重复上述过程，直到所有项都被考虑。

1. 分别为每个受影响轨道维护一个计划增量，初始设置为 0。（这防止了尺寸增加变得依赖于顺序。）
2. 对于每个被适应的项，仅考虑该项跨越的轨道：
3. 查找要分配的空间：从项的尺寸贡献中减去每个跨越轨道（不仅仅是受影响轨道）的受影响尺寸，以零为下限。（对于无限的增长限制，替换为轨道的基准尺寸。）此剩余尺寸贡献即为要分配的空间。space = max(0, size contribution - ∑track-sizes)
4. 在限度内分配空间：

   通过以下方式为每个受影响轨道找到项引起的增量：将空间平均分配给这些轨道，当轨道的受影响尺寸 + 项引起的增量达到其限度时冻结轨道的项引起的增量（并根据需要继续增长未冻结的轨道）。

   对于基准尺寸，限度是其增长限制，如果存在，则由其 fit-content() 参数设定上限。对于增长限制，如果增长限制是有限的且轨道未被标记为无限可增长，则限度为增长限制；否则，如果它具有 fit-content() 轨道尺寸函数，则为该 fit-content() 参数，否则为无穷大。

   注：如果受影响尺寸是增长限制且轨道未标记为无限可增长，则每个项引起的增量将为零。

5. 分配空间给未受影响的轨道：

   如果此时仍有额外的空间剩余，并且该项同时跨越受影响轨道和非受影响轨道，请像上一步一样分配空间，但改为分配给非受影响轨道。

   注：这将任何剩余空间分配给尚未达到其增长限制的轨道，而不是违反受影响轨道的增长限制。

6. 在限度外分配空间：

   如果此时仍有额外的空间剩余，则解冻并继续将空间分配给以下轨道的项引起的增量……

   • 当适应最小贡献或适应 min-content 贡献到基准尺寸时：任何恰好也具有固有最大轨道尺寸函数的受影响轨道；如果没有此类轨道，则所有受影响轨道。
   • 当适应 max-content 贡献到基准尺寸时：任何恰好也具有 max-content 最大轨道尺寸函数的受影响轨道；如果没有此类轨道，则所有受影响轨道。
   • 当适应任何贡献到增长限制时：任何具有固有最大轨道尺寸函数的受影响轨道。

   为此，fit-content() 轨道的最大轨道尺寸函数在轨道达到指定为 fit-content() 参数的限制之前被视为 max-content，之后其最大轨道尺寸函数被视为该参数的固定尺寸函数（这会改变在此步骤中继续获得空间的轨道）。

   注：此步骤根据轨道的最大轨道尺寸函数类型，优先分配用于适应超出轨道当前增长限制的尺寸贡献的空间。

7. 对于每个受影响轨道，如果轨道的项引起的增量大于轨道的计划增量，则将轨道的计划增量设置为该值。