【CSS属性】Grid 布局
Flex 布局是轴线布局，只能指定项目在轴线上的布局方式，可以看作是一维布局。Grid 布局则是将容器划分为行和列，形成若干个单元格，然后指定项目所在的单元格，可以看做是二维布局。
容器属性
display
设置容器采用 grid 布局。
/* 指定容器为块级 grid 布局（容器为块级元素）*/
display: grid;
/* 指定容器为行级 grid 布局（容器为行级元素）*/
display: inline-grid;
grid-template-columns && grid-template-rows
设置行宽和列高。
简单定义。
/* 指定一个三行三列的网格，列宽和行高都是 100px。 */ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;使用
repeat()简化代码。/* 定义四列，每行列宽为 25% */ grid-template-columns: repeat(4, 25%); /* 定义四列，列宽分别为 100px、200px、100px、200px */ grid-template-columns: repeat(2, 100px 200px);auto-fill 关键字，容器存在剩余空间时，用空白单元格填满剩余空间。
/* 定义列宽为 100px，列数自动填充，直到不能放置更多的列 */ grid-template-columns: repeat(auto-fill, 100px);fr 关键字，如果两列的宽度分别为 1fr 和 2fr，就表示后者是前者的两倍。
/* 第一列宽度为 150px，第二列和第三列瓜分剩余空间，且第二列的宽度是第三列的一半 */ grid-template-columns: 150px 1fr 2fr;minmax()设置长度范围，接收最小值和最大值。/* 第三列宽度最小值为 100px，如果容器宽度大于 300px（3fr），则三列宽度一样， 否则第三列为 100px，前两列平分剩余宽度 */ grid-template-columns: 1fr 1fr minmax(100px, 1fr);网格线可以用方括号命名，方便以后引用，允许有多个名字，如
[fifth-line row-5]。/* 指定容器拥有三行三列，因此有四根垂直网格线和四根水平网格线 */ 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 && grid-gap
设置行和列之间的间距。
grid-row-gap，设置行间距。grid-column-gap，设置列间距。grid-gap，复合属性grid-gap: <grid-row-gap> <grid-column-gap>;，如果省略第二个值，浏览器认为第二个值等于第一个值。
/* 行间距、列间距都是 20px */
grid-gap: 20px;
grid-auto-flow【可交互】
设置容器子元素的排列方式。
justify-content && align-content && place-content
设置整个内容区域在容器中的排列方式，默认为 start 左上。
justify-content，设置整个内容区域的水平排列方式（左中右）。align-content，设置整个内容区域的垂直排列方式（上中下）。place-content，复合属性place-content: <align-content> <justify-content>;，如果省略第二个值，则浏览器认为与第一个值相等。
取值为 start | end | center | stretch | space-around | space-between | space-evenly，效果与 flex 布局的同名属性类似。
justify-content: start; 效果如下：
justify-content: space-around; 效果如下：
justify-content: stretch; 效果如下：
justify-items && align-items && place-items
设置单元格内容在单元格中的排列方式，默认为 stretch 占满单元格的区域。
justify-items，设置单元格内容的水平排列方式（左中右）。align-items，设置单元格内容的垂直排列方式（上中下）。place-items，复合属性place-items: <align-items> <justify-items>;，如果省略第二个值，则浏览器认为与第一个值相等。
取值为 start | end | center | stretch。
align-items: start; 效果如下：
justify-items: start; 效果如下：
grid-template-areas
设置区域，一个区域由单个或多个单元格组成。
grid-template-areas:
"a b c"
"d e f"
"g h i";
多个单元格合并：
grid-template-areas:
"a a a"
"b b b"
"c c c";
项目（子元素）属性
grid-column && grid-row【可交互】
设置项目的位置，具体方法就是指定项目的四个边框，分别定位在哪根网格线，。
grid-column-start：左边框所在的垂直网格线。grid-column-end：右边框所在的垂直网格线。grid-row-start：上边框所在的水平网格线。grid-row-end：下边框所在的水平网格线。grid-column：复合属性grid-column: <start-line> / <end-line>。grid-row：复合属性grid-row: <start-line> / <end-line>。
这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。
justify-self && align-self && place-self
设置当前单元格内容的排列方式。
与 justify-items、align-self 、place-self 用法一致，但是只作用于单个项目。
grid-area
设置项目放在哪个区域，取值为 grid-template-areas 中定义的值。
grid-area: e;