Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
注意的是：Grid 布局只对项目生效（即标签中的内容）。
1 什么是： 网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。
2 默认块级
默认情况下，容器元素都是块级元素，但也可以设成行内元素。
div {display:inline-grid;}
3 失效属性
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
父元素的属性
display:grid;
grid-template-columns: ①像素，②百分数，③repeat()函数【如repeat(3, 33.33%)，3是重复次数，当不确定重复次数时可设为auto-fill】，④fr 所占空间（确定比例关系，与确定像素配合使用更方便）
grid-template-rows: 同上;
grid-template-areas:'a b c' (不同字母表示不同区域，相同字母表示相同区域，不需要利用的可以.表示
'b b b'
'c . c';
grid-auto-flow: column、row、row dense、column dense（默认先行后列填充）（dense空白处的填充）
子元素（项目）的属性
grid-column-start属性：左边框所在的垂直网格线 （这四个都可以px、3span）
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
grid-column 属性：grid-column:1 / 3; （grid-column-start和grid-column-end的合并简写形式）
grid-row 属性：同上
grid-area：某一特定区域如e,还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式, 如1 / 1 / 3 / 3;
参考了阮一峰http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
