CSS Grid 网格布局

Grid 网格布局

flex布局不同的是，网格布局（grid）是一个二维的布局，可以创建任意行列的布局。
就比如最常见的九宫格
先创建一个容器，并带有九个子元素。给容器添加边框，为了方便给子元素标号，1~9

接着给父元素（容器）添加grid，并通过 grid-template-columns :（列数） 和 grid-template-rows :（行数）设置列数和行数（复合式写法grid-template:，每行都要用“”括起来）
在这里设置3行3列，再让他们大小一样（每个格子都设置为1fr，一般写在每行的最右边和每列的最下边），并分别起个名字（a1,a2,a3···a9）；

然后用grid-area: 让容器里的9个子元素（1~9）分别对应一个格子名称（a1 ~ a9），为了方便看清，给每个格子添加黄色虚线边框；

最后九宫格就完成了