网格布局
display: grid 指定一个容器采用网格布局
grid-template-columns 属性，grid-template-rows 属性
- 容器指定了网格布局以后，接着就要划分行和列。grid-template-columns 属性定义每一列的列宽，grid-template-rows 属性定义每一行的行高。
- 除了使用绝对单位，也可以使用百分比。
repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat()函数，简化重复的值。上面的代码用 repeat()改写如下。
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定.自动填充，直到容器不能放置更多的列。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr
网格布局提供了 fr 关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
minmax
函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
auto
grid-template-columns: 100px auto 100px;
网格线的名称
还可以使用方括号，指定每一根网格线的名字，方便以后的引用。网格布局为 3 行 x 3 列，因此有 4 根垂直网格线和 4 根水平网格线。方括号里面依次是这八根线的名字。
网格布局允许同一根线有多个名字，比如[fifth-line row-5]。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
grid-row-gap 属性设置行与行的间隔（行间距），grid-column-gap 属性设置列与列的间隔（列间距）
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
grid-gap
是 grid-column-gap 和 grid-row-gap 的合并简写形式，语法如下。 如果 grid-gap 省略了第二个值，浏览器认为第二个值等于第一个值。
grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
grid-gap: 20px 20px;
}
grid-template-areas
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域
grid-auto-flow 属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序 这个顺序由 grid-auto-flow 属性决定，默认值是 row，即"先行后列"。也可以将它设成 column，变成"先列后行"。
justify-items 属性，align-items 属性，place-items 属性
justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格内容的垂直位置（上中下）。 place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
justify-content 属性，align-content 属性,place-content 属性
justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）
container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}