3.8 align-items

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

可选的值:

• stretch - 填充整个单元格的高度（这是默认的）
• start - 使项目与单元格的起始边缘齐平
• end - 使项目与单元格的末端边缘齐平
• center - 使项目在单元格的中心对齐。
• 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 将允许将内容移动到不可访问的区域（"数据丢失"）。

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

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

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

3.12 place-content

place-content 是 align-content 和 justify-content 属性的简写。

可选的值：

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

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

更多细节，请看 align-content 和 justify-content。

3.13 grid-auto-columns 和 grid-auto-rows

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

3.14 grid-auto-flow

如果你有没有明确放置在网格上的网格项目，自动放置算法会启动，自动放置这些项目。这个属性控制了自动摆放算法的工作方式。

可选的值：

• row：告诉自动放置算法依次填入每一行，必要时添加新行（默认值）
• column：告诉自动放置算法依次填入每一列，必要时添加新的列
• dense：告诉自动放置算法，如果较小的项目出现在网格中，则尝试在网格中较早的地方填上洞。

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

请注意，dense 只是改变了你的项目的视觉顺序，可能会导致它们出现失序，这对可访问性不利。

看看下面这个例子:

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

定义了一个五列两行的网格，并将网格自动流设置为行（这也是默认的）：

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

当把 items 放在网格上时，你只为其中两个物品指定位置：

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

因为我们把 grid-auto-flow 设置为行，所以我们的网格会看起来像这样。注意我们没有放置的三个项目（item-b、item-c 和 item-d）是如何在可用的行间流动的。

如果我们把 grid-auto-flow 设置为 column，那么 item-b、item-c 和 item-d 就会沿着 column 流动。

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

3.15 grid

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 设置为列。如果另外指定了 dense 关键字，自动放置算法就会使用 "dense "的打包算法。如果省略了 grid-auto-columns，它被设置为自动。
  
• [ auto-flow && dense? ] <grid-auto-rows>?/ <grid-template-columns>：将grid-template-columns 设置为指定值。如果 auto-flow 关键字在斜线的左边，它设置 grid-auto-flow 为行。如果另外指定了 dense 关键字，自动排布算法就会使用 "dense "的打包算法。如果 grid-auto-rows 被省略，它被设置为自动。
  

下面的两个代码块是等价的：

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

4、Grid 项目属性

需要注意的是：float, display: inline-block, display: table-cell, vertical-align 和 column-* 属性对网格 items 没有影响。

4.1 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end

通过引用特定的网格线来确定一个网格 item 在网格中的位置。 grid-column-start/grid-row-start 是项目开始的线，grid-column-end/grid-row-end 是 item 结束的线。

可选的值：

• <line>：可以是一个数字，指的是一个有编号的网格线，或者是一个名称，指的是一个有名称的网格线
• span <number>：该项目将跨越所提供的网格行数
• span <name>：项目将跨越，直到它到达下一个具有所提供的名称的行。
• auto：表示自动放置，自动跨度，或者默认跨度为1。

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

下面来看例子:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

如果没有声明 grid-column-end/grid-row-end，该项目将默认跨越1个轨道。

项目可以相互重叠。你可以使用 z-index 来控制它们的堆叠顺序。

span 关键字

如果你用 grid-column 或 grid-row 把项目放到它们的父网格上，当项目应该跨越多于一列或一行时，你可以使用 span关键字 来避免指定结束线。

给出一个网格项的以下 CSS 规则，它跨越了 3列 和 2行：

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

我们可以像这样使用 span关键字 来代替:

.item {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

可以提供端线，用跨度代替起始线，在这种情况下，跨度的作用是相反的，所以下面也是等同的：

.item {
  grid-column: span 3 / 5;
  grid-row: span 2 / 3;
}

如果多行有相同的名字，你可以像下面的例子那样定义开始和结束行：

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;
}

该项目从 第2行 的 col列 开始，在 第7行 结束，也叫 col。同样地，它开始于 第6行，名为row，结束于 第10行，名为 row。

在这里，span关键字 也可以提供帮助，下面的内容是等效的：

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;
}

span 也可以和 grid-area 属性一起使用。例如，如果我们希望一个项目被自动放置，但要跨越所提供的行和列的数量：

.item {
  grid-area: span 6 / span 4;
}

4.2 grid-column 和 grid-row

• grid-row 属性是 grid-row-start 和 grid-row-end 的简写形式
• grid-column 属性是 grid-column-start 和 grid-column-end 的简写形式

grid-column 和 grid-row 属性用于定义元素将显示在哪一行或哪一列。

可选的值：

• <start-line> / <end-line>：每一个都接受所有与长写版本相同的值，包括跨度。

如果指定了两个<grid-line>值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

grid-row和grid-column 允许开发者将一个元素放置在网格容器中的特定单元格中。

grid-row属性定义了一个网格项所跨越的行数，可以使用一个值或一对值来指定。如果只指定一个值，则网格项跨越指定的行数。如果使用一对值，则第一个值表示网格项的起始行，第二个值表示网格项的结束行。可以使用数字、关键字和表达式作为值。

例如，下面的代码将一个元素放置在第一行，并跨越三行：

grid-row: 1 / span 3;

grid-column属性定义了一个网格项所跨越的列数，使用方法与grid-row类似。同样可以使用一个值或一对值来指定。如果只指定一个值，则网格项跨越指定的列数。如果使用一对值，则第一个值表示网格项的起始列，第二个值表示网格项的结束列。

例如，下面的代码将一个元素放置在第一列，并跨越两列：

grid-column: 1 / span 2;

需要注意的是，grid-row和grid-column属性只能在网格容器中使用。当一个元素被放置在网格容器中时，它会自动成为网格项，而且这些属性就可以用来对其进行定位和布局。

下面来看例子:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

如果没有声明端线值，项目将默认为跨越1个轨道。

下面看一个demo：

div class="grid">
  <div style="
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  ">
  </div>
  <div style="
    grid-column: 3 / -1;
    grid-row: 1 / 2;
  ">
  </div>
  <div style="
    grid-column: 3 / 4;
    grid-row: 2 / 4;
  ">
  </div>
</div>

4.3 grid-area

给予一个项目一个名字，以便它可以被用 grid-template-areas 属性创建的模板所引用。另外，这个属性可以作为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的一个更简短的缩写。

可选的值：

• <name>：你选择的名称
• <row-start> / <column-start> / <row-end> / <column-end>：可以是数字或命名的行。

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

下面来看例子:

.item-d {
  grid-area: header;
}

grid-row-start + grid-column-start + grid-row-end + grid-column-end的简写：

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}