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