参考
一、网格容器
将属性display值设为grid或inline-grid就创建了一个网格容器，所有容器直接子结点自动成为网格项目。
1、display: grid
网格项目按行排列，网格项目占用整个容器的宽度。
2、display: inline-grid
网格项目按行排列，网格项目宽度由自身宽度决定。
二、显示网格
1、grid-template-rows: 50px 100px
属性grid-template-rows用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）
网格项目1的行高是50px，网格项目2的行高是100px。
因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。
2、grid-template-columns: 90px 50px 120px
属性grid-template-columns用于定义列的尺寸。
因为定义中只有三列，所以项目4，5，6排在新的一行; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。
网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。
3、grid-template-columns: 1fr 1fr 2fr
单位fr用于表示轨道尺寸配额，表示按配额比例分配可用空间。
本例中，项目1占 1/4 宽度，项目2占 1/4 宽度，项目3占 1/2 宽度。
4、grid-template-columns: 3rem 25% 1fr 2fr
单位fr和其它长度单位混合使用时，fr的计算基于其它单位分配后的剩余空间。
本例中，1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3
三、轨道的最小最大尺寸设置
1、grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
函数minmax()接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。
本例中，第一行最小高度设置成100px，但是最大高度设置成auto，表示行高可以根据内容伸长超过100px。
本例中，第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。
（解释： 第三列宽度为3em；第一列内容的宽度为实际宽度，最多占50%总的宽度；剩下的为第二列的宽度）
四、重复的网格轨道
1、grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
函数repeat()接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。
2、grid-template-columns: 30px repeat(3, 1fr) 30px
函数repeat()可以用在轨道定义列表当中
本例中，第1列和第5列的宽度是30px。函数repeat()创建了中间3列，每一列宽度都是1fr。
五、定义网格间隙
属性grid-column-gap 和 grid-row-gap用于定义网格间隙。
网格间隙只创建在行列之间，项目与边界之间无间隙。
1、grid-row-gap: 20px;
grid-column-gap: 5rem;
间隙尺寸可以是任何非负的长度值（px，%，em等）。
2、grid-gap: 100px 1em
属性grid-gap是grid-row-gap和grid-column-gap的简写形式。
第一个值表示行间隙，第二个值表示列间隙。
3、grid-gap: 2rem
如只有一个值，则其即表示行间隙，也表示列间隙
六、用网格线编号定位项目
网格线本质上是用来表示网格轨道的开始和结束。
每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。
1、grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
这是一个3行2列的网格，即在行上有4条网格线，在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。
本例中，项目只跨越一行一列，则grid-row-end和grid-column-end的定义可以省略。
2、grid-row: 2;
grid-column: 3 / 4;
属性grid-row 是 grid-row-start 和 grid-row-end的简写形式。
属性grid-column 是 grid-column-start 和 grid-column-end的简写形式。
如果只指定一个值，它表示 grid-row/column-start。
如果两个值都指定，第一个表示 grid-row/column-start ，第二个值表示grid-row/column-end。而且你必须用斜杠（/）分隔这两个值。
3、grid-area: 2 / 2 / 3 / 3
属性grid-area 是 grid-row-start, grid-column-start, grid-row-end 和 grid-column-end的简写形式。
如果四个值都指定，则第一个表示 grid-row-start, 第二个表示 grid-column-start, 第三个表示 grid-row-end ,第四个表示 grid-column-end。
七、网格项目跨越行列
网格项目默认都占用一行和一列，但可以使用 “用网格线编号定位项目” 定位项目的属性来指定项目跨越多行或多列。
1、grid-column-start: 1;
grid-column-end: 4;
通过grid-column-start和grid-column-end属性值的设置，使该网格项目跨越多列。
2、grid-row-start: 1;
grid-row-end: 4;
通过grid-row-start和grid-row-end属性值的设置，使该网格项目跨越多行。
3、grid-row: 2 / 5;
grid-column: 2 / 4;
简写属性 grid-row 和 grid-column 即能用来定位项目，也能用来使项目跨越多个行列。
4、grid-row: 2 / span 3;
grid-column: span 2;
关键字 span 用来指定跨越行或列的数量。