grid布局

grid布局：将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

基本概念：

1. 采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
2. 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
3. 行和列的交叉区域，称为"单元格"（cell）。
4. 划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

display: grid：默认情况下，容器元素都是块级元素，但也可以设成行内元素(display:inline-grid)。

划分行和列。

• grid-template-columns属性定义每一列的列宽
• grid-template-rows属性定义每一行的行高。

可以使用repeat(重复次数，重复的值)函数，简化重复的值。 

auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。

提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。