CSS 网格布局指南

grid-template-columns
grid-template-rows

使用用空格分隔的值列表定义网格的列和行。这些值表示轨道大小，它们之间的空格表示网格线。

值

• <track-size> – 可以是长度、百分比或使用 fr 单位的网格中可用空间的一部分（有关此单位的更多信息，请查看 DigitalOcean 上的 这篇文章）
• <line-name> – 你选择的任意名称

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

网格线会根据这些分配自动分配正数（-1 是最下面一行的替代值）。

但你可以选择显式地命名这些线。注意方括号语法用于线名

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

注意，一条线可以有多个名称。例如，这里第二条线将有两个名称：row1-end 和 row2-start

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定义包含重复部分，你可以使用 repeat() 表示法 来简化操作

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

等效于

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

如果多条线共享相同的名称，则可以通过其线名和计数来引用它们。

.item {
  grid-column-start: col-start 2;
}

fr 单位允许你将轨道的尺寸设置为网格容器可用空间的一部分。例如，这将把每个项目设置为网格容器宽度的三分之一

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

可用空间是在 任何非灵活项目之后 计算的。在此示例中，fr 单位可用的可用空间总量不包括 50px

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

通过引用使用 grid-area 属性指定的网格区域的名称来定义网格模板。重复网格区域的名称会导致内容跨越这些单元格。句点表示空单元格。语法本身提供了网格结构的可视化。

值

• <grid-area-name> – 由 grid-area 指定的网格区域的名称。
• . – 点号表示一个空的网格单元格。
• none – 未定义任何网格区域。

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

示例

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将创建一个宽度为四列，高度为三行的网格。整个顶行将由 header 区域组成。中间行将由两个 main 区域，一个空单元格和一个 sidebar 区域组成。最后一行全部是 footer。

声明中的每一行都需要具有相同的单元格数量。

您可以使用任意数量的相邻点号来声明单个空单元格。只要点号之间没有空格，它们就表示一个单元格。

请注意，此语法没有命名行，而是命名区域。当您使用此语法时，区域两端的行实际上会自动命名。如果您的网格区域的名称是 foo，则区域的起始行线和起始列线的名称将是 foo-start，其结束行线和结束列线的名称将是 foo-end。这意味着某些行可能具有多个名称，例如上面示例中最左边的行，它将具有三个名称：header-start、main-start 和 footer-start。

grid-template

用于设置 grid-template-rows, grid-template-columns 和 grid-template-areas 的简写。

值

• none – 将所有三个属性设置为它们的初始值。
• <grid-template-rows> / <grid-template-columns> – 分别将 grid-template-columns 和 grid-template-rows 设置为指定的值，并将 grid-template-areas 设置为 none。

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

它还接受一种更复杂但非常实用的语法来指定所有三个属性。以下是一个示例

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

等效于以下内容

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template 不会重置 隐式 网格属性（grid-auto-columns, grid-auto-rows 和 grid-auto-flow），这可能是在大多数情况下您想要执行的操作，建议使用 grid 属性而不是 grid-template。

column-gap
row-gap
grid-column-gap
grid-row-gap

指定网格线的尺寸。您可以将其视为设置列/行之间间距的宽度。

值

• <line-size> – 长度值。

.container {
  /* standard */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /* old */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  column-gap: 10px;
  row-gap: 15px;
}

间距仅在列/行 之间 创建，而不是在外部边缘。

注意： grid- 前缀将被删除， grid-column-gap 和 grid-row-gap 将被重命名为 column-gap 和 row-gap。Chrome 68+、Safari 11.2 Release 50+ 和 Opera 54+ 已支持无前缀属性。

gap
grid-gap

用于 row-gap 和 column-gap 的简写。

值

• <grid-row-gap> <grid-column-gap> – 长度值。

.container {
  /* standard */
  gap: <grid-row-gap> <grid-column-gap>;

  /* old */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

示例

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  gap: 15px 10px;
}

如果未指定 row-gap，则将其设置为与 column-gap 相同的值。

注意： grid- 前缀已弃用（但谁知道，可能永远不会真正从浏览器中删除）。本质上， grid-gap 已重命名为 gap。Chrome 68+、Safari 11.2 Release 50+ 和 Opera 54+ 已支持无前缀属性。

justify-items

沿 内联（行） 轴对齐网格项目（与 align-items 沿 块（列） 轴对齐相反）。此值适用于容器内的所有网格项目。

值

• start – 将项目与单元格的起始边缘对齐。
• end – 将项目与单元格的结束边缘对齐。
• center – 将项目在其单元格的中心对齐。
• stretch – 填充整个单元格宽度（这是默认值）。

.container {
  justify-items: start | end | center | stretch;
}

示例

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

此行为也可以通过 justify-self 属性在单个网格项目上设置。

align-items

沿 块（列） 轴对齐网格项目（与 justify-items 沿 内联（行） 轴对齐相反）。此值适用于容器内的所有网格项目。

值

• stretch – 填充整个单元格高度（这是默认值）。
• start – 将项目与单元格的起始边缘对齐。
• end – 将项目与单元格的结束边缘对齐。
• center – 将项目在其单元格的中心对齐。
• baseline – 将项目对齐到文本基线。baseline 有两个修饰符：first baseline 和 last baseline，在多行文本情况下，它们将使用第一行或最后一行文本的基线进行对齐。

.container {
  align-items: start | end | center | stretch;
}

示例

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

这种行为也可以通过 align-self 属性在单个网格项目上设置。

还有两个修饰符关键字 safe 和 unsafe（用法类似于 align-items: safe end）。safe 关键字意味着“尝试以这种方式对齐，但如果会导致将项目对齐到无法访问的溢出区域，则不进行对齐”，而 unsafe 允许将内容移动到无法访问的区域（“数据丢失”）。

place-items

place-items 在一个声明中同时设置 align-items 和 justify-items 属性。

值

• <align-items> / <justify-items> – 第一个值设置 align-items，第二个值设置 justify-items。如果省略第二个值，则第一个值将分配给这两个属性。

有关更多详细信息，请参阅 align-items 和 justify-items。

这对于快速多方向居中非常有用。

.center {
  display: grid;
  place-items: center;
}

justify-content

有时，网格的总尺寸可能小于其网格容器的尺寸。如果所有网格项目都使用非弹性单位（如 px）进行大小调整，则可能会发生这种情况。在这种情况下，可以在网格容器内设置网格的对齐方式。此属性沿着 内联（行） 轴对齐网格（与 align-content 沿着 块（列） 轴对齐网格相反）。

值

• start – 将网格对齐到网格容器的起始边缘。
• end – 将网格对齐到网格容器的结束边缘。
• center – 将网格对齐到网格容器的中心。
• stretch – 调整网格项目的大小，使网格填满网格容器的整个宽度。
• space-around – 在每个网格项目之间放置相同数量的空间，在两端放置一半大小的空间。
• space-between – 在每个网格项目之间放置相同数量的空间，两端不留空间。
• space-evenly – 在每个网格项目之间放置相同数量的空间，包括两端。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

示例

.container {
  justify-content: start;
}

.container {
  justify-content: end;    
}

.container {
  justify-content: center;    
}

.container {
  justify-content: stretch;    
}

.container {
  justify-content: space-around;    
}

.container {
  justify-content: space-between;    
}

.container {
  justify-content: space-evenly;    
}

align-content

有时，网格的总尺寸可能小于其网格容器的尺寸。如果所有网格项目都使用非弹性单位（如 px）进行大小调整，则可能会发生这种情况。在这种情况下，可以在网格容器内设置网格的对齐方式。此属性沿着 块（列） 轴对齐网格（与 justify-content 沿着 内联（行） 轴对齐网格相反）。

值

• start – 将网格对齐到网格容器的起始边缘。
• end – 将网格对齐到网格容器的结束边缘。
• center – 将网格对齐到网格容器的中心。
• stretch – 调整网格项目的大小，使网格填满网格容器的整个高度。
• space-around – 在每个网格项目之间放置相同数量的空间，在两端放置一半大小的空间。
• space-between – 在每个网格项目之间放置相同数量的空间，两端不留空间。
• space-evenly – 在每个网格项目之间放置相同数量的空间，包括两端。

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

示例

.container {
  align-content: start;    
}

.container {
  align-content: end;    
}

.container {
  align-content: center;    
}

.container {
  align-content: stretch;    
}

.container {
  align-content: space-around;    
}

.container {
  align-content: space-between;    
}

.container {
  align-content: space-evenly;    
}

place-content

place-content 在一个声明中同时设置 align-content 和 justify-content 属性。

值

• <align-content> / <justify-content> – 第一个值设置 align-content，第二个值设置 justify-content。如果省略第二个值，则第一个值将分配给这两个属性。

除了 Edge 之外，所有主流浏览器都支持 place-content 简写属性。

有关更多详细信息，请参阅 align-content 和 justify-content。

grid-auto-columns
grid-auto-rows

指定任何自动生成的网格轨道（也称为 隐式网格轨道）的大小。当网格项目多于网格中的单元格，或者网格项目放置在显式网格之外时，会创建隐式轨道。（请参阅 显式网格和隐式网格之间的区别）

值

• <track-size> – 可以是长度、百分比，或网格中可用空间的一部分（使用 fr 单位）。

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

为了说明如何创建隐式网格轨道，请考虑以下示例：

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

这将创建一个 2 x 2 的网格。

但是现在假设使用 grid-column 和 grid-row 像这样定位网格项目：

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

我们告诉 .item-b 从第 5 列线开始，到第 6 列线结束， 但我们从未定义过第 5 列线或第 6 列线。因为我们引用了不存在的行，所以会创建宽度为 0 的隐式轨道来填补间隙。可以使用 grid-auto-columns 和 grid-auto-rows 指定这些隐式轨道的宽度。

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

如果您的网格项目没有在网格上明确放置，则 _自动放置算法_ 会启动以自动放置项目。 此属性控制自动放置算法的工作方式。

值

• row – 告诉自动放置算法依次填充每一行，并在需要时添加新行（默认）
• column – 告诉自动放置算法依次填充每一列，并在需要时添加新列
• dense – 告诉自动放置算法如果以后出现较小的项目，则尝试填充网格中较早的空白区域

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

请注意，dense 仅更改项目的视觉顺序，并可能导致它们以错误的顺序出现，这对可访问性不利。

示例

考虑以下 HTML

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

您定义了一个具有五列两行的网格，并将 grid-auto-flow 设置为 row（这也是默认值）

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

在网格上放置项目时，您只指定了其中两个项目的位置

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

因为我们将 grid-auto-flow 设置为 row，所以我们的网格将如下所示。 请注意，我们未放置的三个项目（item-b、item-c 和 item-d）如何在可用行中流动

如果我们将 grid-auto-flow 设置为 column，则 item-b、item-c 和 item-d 会沿着列向下流动

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

grid

在单个声明中设置以下所有属性的简写形式：grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow（注意：您只能在单个网格声明中指定显式或隐式网格属性）。

值

• none – 将所有子属性设置为其初始值。
• <grid-template> – 与 grid-template 简写形式的工作方式相同。
• <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? – 将 grid-template-rows 设置为指定的值。 如果斜杠右侧是 auto-flow 关键字，则将 grid-auto-flow 设置为 column。 如果还指定了 dense 关键字，则自动放置算法使用“密集”打包算法。 如果省略了 grid-auto-columns，则将其设置为 auto。
• [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> – 将 grid-template-columns 设置为指定的值。 如果斜杠左侧是 auto-flow 关键字，则将 grid-auto-flow 设置为 row。 如果还指定了 dense 关键字，则自动放置算法使用“密集”打包算法。 如果省略了 grid-auto-rows，则将其设置为 auto。

示例

以下两个代码块是等效的

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

以下两个代码块是等效的

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

以下两个代码块是等效的

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

以下两个代码块是等效的

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

它还接受一种更复杂但非常方便的语法来一次设置所有内容。 您指定 grid-template-areas、grid-template-rows 和 grid-template-columns，所有其他子属性都设置为其初始值。 您所做的是在线指定行名和轨道大小及其相应的网格区域。 最好用示例来描述这一点

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等效于以下内容

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}