1、网格布局的含义，及与弹性盒布局的区别
含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各式各样的布局；
区别：Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们存在重大区别。
Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。也就是弹性盒布局是让这些项目（小盒子）统一在正轴的中间显示/两端对齐/靠左显示/靠右显示，在副轴什么位置显示。
Grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。
✍网格布局案例：不规则布局页面（win窗口）
2、Grid布局介绍
✍（1）容器、项目、行和列、单元格、网格线的概念：
✍（2）网格布局的属性：
网格布局中的属性和flex中的布局属性类似，分为两类：容器属性、项目属性
【1】容器属性：
给父元素添加display：grid；
属性值有两个：grid（块网格）、inline-grid（行内网格，行内快）；
下面介绍的“3-6”属性都是加在父盒子身上的；
说明一点：行内标签加上了display：grid；就可以设置宽和高了，
【2】项目属性：下面介绍的“7-以后”是加给子盒子的；
3、行列属性、行列划分（行和列属性也是加在父盒子身上的）
行属性：grid-template-row： 列属性：grid-template-column：
设置行属性和列属性有几种办法：
（1）设置固定值行和列：
设置格式：
结果：结果是3行3列的网格盒子
代码说明：代码中画红色框的是设置行和列的属性，设置的是3行3列的网格，如果想设置成3行3列，行属性就有三个属性值，三个属性值分别是3行的高度大小，列属性也有三个属性值，三个属性值代表的是3列的宽度大小。就是行属性值有n个代表划分为n行，列同理；数值代表每行占的高度大小，列同理。属性值个数代表行数/列数，属性值大小代表每行行高/每列列宽。
（2）设置百分比行和列：
结果：
（3）repeat函数设置行和列：（设置等宽等高网格的好办法）
结果：
代码说明：repeat（参数1，参数2）；用repeat（）函数这种办法是设置等宽等高网格的好办法，第一个参数是设置n行/n列，第二个参数是行高/列宽是多少
另外，这个repeat函数的写法还支持将前面第一个参数改为“auto-fill”，这样网格会根据后面写的等比百分比自动给你划分为等高等宽的几行几列。代码：
结果是四行四列的网格。。。。
（4）用fr片段设置行和列属性：
代码：
结果：
代码说明：fr是一个比例单位，类似于弹性盒里面的flex属性，比如上述代码行属性值：100px 1fr 300px；这句话的含义是第一行100px高度，第三行300px高度，中间那行自适应；上述列属性值：1fr 2fr 1fr；含义是三行按照1:2:1的比例划分宽度。总结：如果属性值中只有一个用了fr这个单位，就是自适应；如果是多了用了fr，就代表按照比例划分高度/宽度。
（5）auto自适应来设置行和列
这个自适应也可以写成auto，代码如下：
4、行间距/列间距（重点：复合属性）
属性介绍：
行间距：grid-row-gap: 20px； 列间距：grid-column-gap: 20px； 复合式写法：grid-gap: 20px 20px；
新版本的可以省略前面的grid；行间距：row-gap：20px； 列间距：column-gap：20px； 复合写法：gap：20px 20px；
代码演示：
结果：
5、网格区域合并
视频：178-网格布局-区域命名与合并_哔哩哔哩_bilibili
首先我们先定义一下这些网格区域的名字：用属性grid-template-areas：定义
因为上面我们划分了3行3列，所以这里我们定义了九个区域的名字，
那我们想将“2”和“3”这个区域合并在一起：
结果：
代码说明：我们想让2和3位置合并都是2的位置，那我们就将上面代码中那个c的区域名也改成b的区域名，这样就说明b占了两个位置，然后把b那片区域赋给2这个孩子，那2就占了两个位置了，然后3这个盒子就被挤到下一格了，然后9就被挤没了，看结果可以看出来2占了两个位置，9没了。
6、对齐方式
（1）内容排列方式
网格布局里面的内容默认是横向排列的图示：
将其改为竖直方向，需要属性：grid-auto-flow：column；默认是（row）
（2）网格对齐方式
还有如果里面的网格设置的区域很小，占不满整个大盒子，图示：
我们可以设置这个网格在大盒子中的显示位置，属性如下：
水平方向对齐属性：justify-content：
竖直方向对齐属性：align-content：
复合写法：place-content：
（3）网格内容对齐属性：
7、项目属性：（目的也是为了网格合并）
学这个属性前，也知道网格线的知识，图示：
网格线指的是图示中1-6的竖线和横线，我们可以控制开始的网格线和结束的网格线实现网格合并
属性介绍：
代码：
结果：
代码解释：画红色框的代码指的是“1”的区域是行从第一个网格线开始到第二个网格线结束，也就是第一行；列从第一个网格线开始到第三个网格线结束，也就是前两列，所以‘1’所占的区域就是第一行前两列。。。
