网格布局

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