逆战班：网格布局（grid）

Grid 是一个二维的布局方法 纵横两个方向同时存在
使用display：grid 形成网格布局，将一个容器分成多分，网格可以进行多种组合

网格有行与列之分，水平的为行（row），垂直的为列（column）

网格的属性：
应用在父容器的属性：
grid-template-rows 该属性定义行数的同时也定义了行宽
grid-template-columns 该属性定义列的同时也定义列列的宽度


属性值的单位既可以使用像素作为单位，也可以使用百分比作为单位来定义网格，百分比所得出的最终宽度，基于父元素的容器的宽度。
还有一个网格中的fr关键字，利用fr对网格进行均分
fr代表每行或者每列在整个宽度或者高度中占多少 grid-template-rows :1fr 2fr;这代表在一行内，后一个网格的宽度是前一个网格的两倍，grid-template-rows ：150px;1fr 2fr;这表示在一行内第一个网格的宽度是150px，而剩下的两个根据剩余的空间，进行计算，第三个是第二个的两倍


单独的去设置每一行或者的列的宽度过于繁琐，可以使用repeat（）来进行多个设置
grid-template-columns: repeat(4，1fr);
grid-template-rows: repeat(4,1fr);
使用grid-column-gap 和grid-row-gap去设置单元格之间的距离，这个布局不会将网格挤出父元素，只会压缩单元格的宽度
grid-column-gap 设置列之间的宽度
grid-row-gap设置行之间的宽度
grid-gap 这是二者的复合写法 有固定顺序，先行后列

对网格进行行列的设置后，要对网格进行区域的划分
使用grid-template-areas 对网格进行区域的划分 划分有一个条件，便是，所有划分的区域必须为矩形，否则不会生效
常用的方法

a1，a2等为一个名称，可以变定义，这意味着将四个区域分别进行命名，使用时，更加方便

	子元素使用grid-area进行区域选择
		div{grid-area:a1;}   意思是，div占据了a1的区域

也可以给单元格中的元素定义对齐的方式
align-items 定义了整体子项的垂直居中方式
justify-items 整体子项的水平居中方式
值有 start end center 默认值为stretch
justify-content 定义了网格整体的水平对齐方式
alitems-contents 定义了网格整体的垂直对齐方式
默认 stretch
start 在开头对齐
center 在中间对齐
end 在尾部对齐
space-between 在两端对齐，中间空出空间
space-around 内容中间空出的距离是两端点空出的两倍
spce-evenly 端点空出的距离与中间的距离相等

给子项添加的属性：
以下四个属性用于移动每一个方块
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上的结束位置
注：
只有在grid-column-end和grid-row-end中可以设置span操作
span去设置的不是结束的位置，而是个数
正常写数字是位置，加上span是个数 是方块的个数，占据的了几个方块，

加上span之后，便不再是结束的位置，而是方块的个数
grid-area 值不需要加引号 将子元素与网格所发分的区域对应起来
grid-area：水平开始 / 垂直开始 / 水平结束 /垂直结束
1.可以写对应网格的名字
2.也可以写对丁的线的数字
grid-row-start / grid-column-start / grid-row-end / grid-column-end
第二种遍试与上边类似

第一种：

子项也有自身的对齐方式
align-self 垂直方向单个子项的对齐方式
justify-self 水平方向 单个子项的对齐方式