GRID布局
添加grid布局：display：grid；
在盒子中有几个子元素就会有几个横单元格
设置为网格布局：display：inline-grid；
容器（父元素）：
划分行：grid-template-rows：； 单位：px % fr
划分列：grid-template-columns：； 单位：px % fr
fr:为比例单位。%为总长度或宽度的百分比。Auto为自适应。
重复列行：repeat（行列数，1fr）
例：重复列，行
grid-temple-rows：repeat（3,1fr）；划分为三行，均分
grid-temple-columns：repeat（3,1fr）；划分为三列，均分
划分区域：必须划分了行和列
grid-template-areas：
“区域1 区域2 区域3 ”
“区域5 区域4 区域6”；
子元素占区域时，需要结合项目属性grid-area：区域名字； 划分区域的综合写法：grid-template：“分区” 分行/分列；
例如：
行间距/列间距：
grid-row-gap：；行间距
grid-column-gap：；列间距
复合式写法：如 grid-gap:30px 30px ；
设置整个内容区域在容器里面的水平 | 垂直 对齐方式
网格整体水平位置：justify-content：；
start 起始位置
end 结束位置
center 居中
stretch 默认值，项目大小没有指定时，拉伸占据整个网格容器。
space-around 两端平分
space-between 两端对齐
space-evenly 剩余空间平均分配
网格整体垂直位置：align-content：；
start 起始位置
end 结束位置
center 居中
stretch 默认值，项目大小没有指定时，拉伸占据整个网格容器。
space-around 两端平分
space-between 两端对齐
space-evenly 剩余空间平均分配
网格整体水平 垂直位置综合写法：place-content：垂直 水平；
单个网格的呈现方式：
水平：justify-items: start | end | center | stretch;
垂直：align-items: start | end | center | stretch;
综合写法：place-items:垂直位置 水平位置；
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：默认值，拉伸，占满单元格的整个宽度（默认值）。
项目（子元素）：
grid-area：；占区域，只能在占好的区域中用
方式1：grid-area：区域名称
方式2：grid-area：行起点/列起点/行结束/列结束；
grid-column-start：；列线开始
grid-column-end：；列线结束
grid-row-start：；行线开始
grid-row-end：；行线结束
只有end时才有span 意思是占几个网格
例如： grid-column-end：span 3；
grid-row-end：span 3；
单个元素网格的垂直 水平对齐方式：
水平：justify-self
垂直：align-self
综合写法：place-self：垂直位置 水平位置；
属性:start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：默认值，拉伸，占满单元格的整个宽度（默认值）。