网格布局 display：grid

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