1、网格布局grid
网格Grid布局是前端Css的终极解决方案，grid共有40多个属性，总体来说分为两大类：网格编排属性和子项放置属性
1.1、网格编排属性
网格编排负责处理格子的分布，解决格子是怎么画出来的问题。
1.1.1、display: grid
display: grid 将容器变为网格容器
网格容器中的子元素（网格项）自动变为块盒
1.1.2、grid-template-columns
grid-template-columns 规定网格的列的宽度
可选值1：grid-template-columns: 100px 100px 100px; 定义了3列，每列宽度100px；
可选值2：grid-template-columns: 10% 20% 30%; 定义了3列，第一列10%，第二列20%，第三列30%；
repeat()函数
repeat(重复的次数，重复的值(尺寸))函数用于简化多行或多列的尺寸定义
可选值3：grid-template-columns: repeat(3, 100px);
可选值4：grid-template-columns: 50px repeat(3, 100px) 10%; 复杂写法，多种写法可以混合使用
fr单位
相对单位，把容器空间按照比例分配，能根据容器的宽度变化而跟随变化
可选值5：grid-template-columns: 1fr 2fr 3fr 4fr; 定义了4列，第一列1份，第二列2份，第三列3份，第四列4份，总共分了10份
1.1.3、grid-template-rows
grid-template-rows 规定网格的行的高度
可选值1：grid-templates-rows: 100px 100px 100px; 定义了3行，每行高度100px;
1.1.4、justify-content
justify-content 控制横向单元格的对齐方式
1.1.5、align-content
align-content 控制纵向单元格的对齐方式
1.1.6、gap
row-gap 行间隙
column-gap 列间隙
gap 速写属性，行间隙和列间隙写在一起，写法1：`gap: value`; 写法2：`gap: xValue yValue`
`gap:10px;` 等价于 `row-gap: 10px; column-gap: 10px;`
1.1.7、grid-auto-rows
grid-auto-rows 隐式网格的行高
grid-template-rows 定义的是显示网格的数量，当网格数量大于grid-template-rows定义的数量，多余的网格就会按隐式网格的规格来排列
用法1：grid-auto-rows: 80px; 隐式网格的行高为80px
minmax()函数
minmax(minValue, maxValue)函数用于产生一个尺寸区间
用法2：grid-auto-rows: minmax(80px, auto); 隐式网格行高最小值80px，最大值自动
1.1.8、grid-auto-columns
gird-auto-columns 隐式网格的列宽
1.1.9、auto-fill
auto-fill 自动填充，尽可能多的去填充，用于得到一个尽可能多的网格数量
示例：宽度自适应排列 `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));`
1.1.10、auto-fit
auto-fit 自动填充，尽量合适，用于得到一个尽可能刚好容纳所有网格项的网格数量；与auto-fill的区别是，auto-fill 自动填充，尽量多。
一个强调合适，一个强调多，只有在单行的时候才能看出差别，多行时这两个没有区别。
1.2、子项放置属性
网格画出来的，子项怎么放置，是一个元素占多个格子，还是只占一个格子呢，在一个格子里面，是占到左上角，还是横向居中呢，子项放置属性来解决这类问题。