grid布局
概念
将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。例如：9宫格## 容器属性
声明网格布局
display: grid/inline-grid;
grid可以将元素转为块元素，inline-grid可以将元素转为行内元素。### 划分行和列
划分行
grid-template-rows: 值;
取值说明：
可以是多个值，每个值之间使用空格隔开，值的个数表示要划分多少行。
每个值都是具体的长度值。
例：
grid-template-rows: 100px 200px 200px 100px;
4个值，表示要划分4行，这4行的高度分别为100px、200px、200px、100px。
划分列
grid-template-columns: 值;
划分列的取值跟划分行的取值是一样的：值的个数表示要划分的列的个数，每个值都表示列的宽度。
划分行和列，取值中的每个值还可以使用百分比来表示，例：
grid-template-rows: 10% 20% 30% 20% 20%;
表示划分5个行，高度分别为父标签的指定百分比。 划分行和列还可以使用分数来描述：
grid-template-columns: 1fr 3fr 1fr;
代表共分3列，将容器分为5份，其中第一列占据1份，第二列占据3份，第三份占据1份。
设置单元格行或列的最大值和最小值：
grid-template-columns: minmax(最小值, 最大值);
当剩余距离小于最小值，且小于最大值，则使用最小值作为单元格的宽或高；
当剩余距离大于最小值，且小于最大值，则使用剩余距离作为单元格的宽或高
当剩余距离大于最大值，且大于最小值，则使用最大值作为单元格的宽或高； auto可以代替具体的值，表示自动填充，占据剩余所有的距离
grid-template-columns:30px auto 20px;
表示第一列30px，第三列20px，剩余的所有距离都属于第二列。
设置单元格之间的间距
设置行间距
grid-row-gap: 20px;
表示，行和行之间的间距为20px。
设置列间距
grid-column-gap: 30px;
表示，列和列之间的间距为30px。
设置间距的复合写法
grid-gap: 20px 50px;
第一个值表示行间距，第二个值表示列间距。
规划子元素排列的方向
grid-auto-flow: column | row;
column表示纵向排列，row表示横向排列，默认使用row
内容在单元格内的对齐方式
水平对齐方式
justify-items: start | end | center | stretch;
如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start，因为设置了宽和高以后，stretch将不生效。
start：居左
end：居右
center：居中
stretch：拉伸
垂直对齐方式
align-items: start | end | center | stretch;
如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start，因为设置了宽和高以后，stretch将不生效。
start：居上
end：居下
center：居中
stretch：拉伸
复合写法
place-item:垂直对齐方式 水平对齐方式;
网格在容器中的对齐方式
水平对齐方式
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: 垂直对齐方式 水平对齐方式
start - 对齐容器的起始边框。end - 对齐容器的结束边框。center - 容器内部居中。stretch - 项目大小没有指定时，拉伸占据整个网格容器。space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。pace-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
指定网格线名称
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
指定网格布局为3行x3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。默认以1234来命名。
项目属性
指定网格线合并单元格：
grid-column-start: 开始的纵向网格线名称;
grid-column-end: 结束的纵向网格线名称;
grid-row-start: 开始的横向网格线名称;
grid-row-end: 结束的横向网格线名称;
grid-column-start属性：左边框所在的垂直网格线 grid-column-end属性：右边框所在的垂直网格线 grid-row-start属性：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线
复合写法：
grid-column: grid-column-start网格线名称的值 / grid-column-end的值;
grid-row: grid-row-start的值 / grid-row-end的值;
设置网格区域分配项目
正常情况下，是一个项目占据一个单元格。如果在某些特殊情况下，我们需要让一个项目，占据多个单元格，就需要设置网格区域来分配项目了。 网格是3*3的九宫格，但只放3张图片，且每张图片需求的大小不同。
设置网格区域分配项目时，需要容器的属性跟项目的属性配合使用：
-
给每个单元格命名，且通过名称将多个单元格进行合并
容器属性：
/* 将容器划分为9宫格 */ display: grid; grid-template-rows: repeat(3, 100px); grid-template-columns: repeat(3, 100px); /* 给每个单元格命名 */ grid-template-areas: "a a c" "d e f" "g h i";注意：相同的名称可以进行合并，但单元格合并后必须是一个长方形或正方形。
-
给项目设置要占据的区域名称
项目属性：
grid-area:区域名称；指定当前项目要占据的区域名称，区域名称不需要加引号。相当于将单元格进行了合并，指定某个元素占据合并后单元格，所以最后一个元素没有单元格可占，被挤出了网格外。
如果指定的合并单元格不能组成长方形或正方形，将出现混乱：如果某些单元格不放内容，则可以使用.来描述区域名称，表示无用区域：
