网格布局
1、概念：网格布局和弹性盒相似，也是控制子级元素在父级元素中的位置（给当前父级元素添加网格属性，将页面划分成很多个网格）
属性：display
属性值：grid
特点：
容器：设置了网格属性的父级盒子
项目：在容器下的直接子级盒子
基础：设置了网格布局的属性默认是从上到下显示的，在浏览器中需显示看不见的需要手动审查元素才能看见
grid-template-columns：列
grid-template-rows：行
属性值
1：固定的数值 100px 100px 100px
2：百分比 33.33% 33.33% 33.33%
3：功能函数&关键字
fr自适应单位
grid-template-areas划分网格区域
grid-area单元格的选择区域 简写方式：grid-template
grid-column-gap列之间的距离
grid-row-gap列之间的距离 简写方式：grid-gap
