1. Grid网格布局（基础知识）
①Grid容器(container)和项目(item)
采用grid网格布局的元素，称为Grid容器
display：grid|inline-grid;
Grid容器的所有子元素自动成为容器成员，称为grid项目。
②列、行和单元格
容器中的水平区域称为"行"（row),垂直区域称为“列”(column).
行和列的交叉区域，称为“单元格”(cell).
③网格线
划分网格的线，称为“网格线”（grid line）
水平网格线划分出行，垂直网格线划分出列。
2. Grid容器的属性
//1.display
// 指定一个元素采用网格布局
// diaplay:grid|inline-grid
// grid:容器元素是块级元素
// inline-grid：容器元素是内联块元素
//2.grid-template-rows和grid-template-columns
// grid-template-rows 定义每一行的高
// grid-template-rows：固定数值|%|fr|auto|repeat()|minmax()
// 百分比%：容器宽高的百分比，不包括内边距和边框
// fr（fraction，片段）：分配剩余可用空间
// auto：先于fr计算，获取必要的最小空间
// repeat()：简化重复的值
// minmax(min,max)：min<=取值<=max
// grid-template-columns 定义每一列的列宽
// grid-template-columns：固定数值|%|fr|auto|repeat()|minmax()
//3.grid-auto-flow
// 定义项目的排列顺序
// grid-auto-flow：row（默认值）|column|row dense|column dense;
// row（默认值）：先填满第一行，再放入第二行
// column：先填满第一列，再放入第二列
// row dense：row，在稍后出现较小的项目时，尝试填充网格中较早的空缺
// column dense：column，在稍后出现较小的项目时，尝试填充网格中较早的空缺
//4.grid-auto-rows和grid-auto-columns
// grid-auto-rows:定义浏览器自动创建的多余网络的行高
// grid-auto-columns:定义浏览器自动创建的多余网络的列宽
//5.row-gap和column-gap、gap
// row-gap：行间距；column-gap：列间距；
//6.grid-template-areas
// 定义区域，如果某些区域不用，就是用“点”(.)表示
// 区域的命名会影响到网格线。
// 每个区域的起始网格线，会自动命名为区域名-start
// 每个区域的终止网格线，会自动命名为区域名-end
//7.align-items/justify-items/place-items
// align-items：设置项目的垂直位置（上中下）
// justify-items：设置项目的水平位置（左中右）
// align-items/justify-items：stretch(默认值)|start|end|center
// stretch(默认值)：拉伸，占满单元格的整个宽高
// start：对其单元格的起始边缘
// end:对其单元格的终止边缘
// center:单元格内部居中
// place-items：是前两者的合并简写形式
//8.align-content/justify-content/place-content
// align-content：设置整个内容区域的垂直位置（上中下）
// justify-content：设置整个内容区域的水平位置（左中右）
// align-content/justify-content：stretch(默
认值)|start|end|center|space-around
// |space-between|space-evenly
// stretch(默认值)：项目大小没有指定时，拉伸占据整个网格容器
// start：对齐容器的左上角位置
// end:对齐容器的右下角位置
// center: 水平垂直居中
// space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍
// space-between：项目与项目之间的间隔相等，项目与容器边框之间没有间隔
// space-evenly：项目与项目之间的间隔相等，项目与容器边框之间的间隔也相等
// place-content：是前两者的合并简写形式
3. Grid 项目的属性
//1.grid-column-start/grid-column-end/grid-row-start/grid-row-end
// 指定项目的位置。这些属性的属性值都是：number|name|span number
// number:数字，从第几个网格线开始，到第几个网格线结束
// 项目可以重叠，使用z-index来控制重叠顺序
// name:通过名字来引用一个明名的网格线
// span number：该网格项将跨越所提供的网格数量
//2.grid-column：grid-column-start/grid-column-end;（用“/”隔开）
//3.grid-row：grid-row-start/grid-row-end;（用“/”隔开）
//4.grid-area
// 指定项目放在哪一个区域
// grid-area：区域名
// grid-area：grid-row-start/grid-column-start/grid-row-end/grid-column-end;
// grid-area：2/2/3/3;(从左上角到右下角)
//4.align-self/justify-self/place-self
// align-self：设置项目的垂直位置（上中下），只作用于单个项目
// justify-self：设置项目的水平位置（左中右），只作用于单个项目
// align-self/justify-self：stretch(默认值)|start|end|center
// stretch(默认值)：拉伸，占满单元格的整个宽高
// start：对齐单元格的起始边缘
// end:对齐单元格的结束边缘
// center:单元格内部居中
// place-self：是前两个的合并简写