《十二》CSS3 Grid 网格布局

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

任何一个 HTML 元素都可以通过设置 display: grid（容器元素是块级元素） | inline-grid（容器元素是内联块元素） 指定为网格布局。

Flex 布局 VS Grid 布局：

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

基本概念：

容器和项目：

采用 Grid 网格布局的元素，称为容器（container）。

容器的所有直接子元素自动成为容器成员，称为项目（item）。

项目只能是容器的直接子元素，不包含孙子元素。
Grid 布局只对项目生效。

内容：

所有的项目组合在一起，称为内容（content）。

容器是所有项目的父容器。
内容是所有项目的结合体。

行、列和单元格：

容器里面的水平区域称为行（row），垂直区域称为列（column）。

行和列的交叉区域，称为单元格（cell）。正常情况下，n 行和 m 列会产生 n x m 个单元格（比如：3 行 3 列会产生 9 个单元格）。

区域：

网格布局允许指定区域，一个区域由单个或多个单元格组成。开发人员可以人为将某一块划分为一个区域（area）。

行间距和列间距：

行与行之间的间距，称为行间距（row gap）。列与列之间的间距，称为列间距（column gap）。

网格线和网格轨道：

划分网格的线，称为网格线（grid line）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n 行有 n + 1 根水平网格线，m 列有 m + 1 根垂直网格线（比如：3 行就有 4 根水平网格线）。

网格线之间的空间，称为网格轨道（track）。

容器属性：

grid-template 属性：是 grid-template-columns、grid-template-rows 和 grid-template-areas 这三个属性的合并简写形式。
grid 属性：是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式。
从易读易写的角度考虑，建议不要合并属性。

grid-template-rows 属性、grid-template-columns 属性：

grid-template-rows ：定义每一行的行高，属性值可以是固定数值、相对于容器宽高的百分比、fr、auto、repeat() 和 minmax()。

grid-template-columns ：定义每一列的列宽，属性值可以是固定数值、相对于容器宽高的百分比、fr、auto、repeat() 和 minmax()<