常见的布局：http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html
采用网格布局的区域，称为"容器"（container）
可以看成EXCEL表格或围棋棋盘布局。n+1条线中夹着n个行或列。正常情况下，n行和m列会产生n x m个单元格。
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
flex弹性布局。grid二维布局。这两者的核心是：一个盒子里有很多小盒子，如何排列？flex就是沿着一条线铺下去，这个线可能水平，也可能垂直，这个平铺的方向用flex-direction来控制。所以flex才有换行命令。而且当同级小盒子很多的时候，往往动一发而动全身，很不方便。
grid是把盒子用线分成很多份，把小盒子一个个填进去。如何把盒子分成很多份？ grid-template-columns/grid-template-row而要把小盒子准确的填进去，grid有两种方法，一种是给分好的区域起名字。grid-template-areas；然后再给小盒子起名字，小盒子就会占据对应的区域。二是，小盒子通过网格线调整自身定位；grid-column / grid-row ；相当于调整一个盒子的边框位置，来改变盒子位置。
容器属性：
先定义出一个网格布局。
1 display: grid
指定一个容器采用网格布局，默认为块级元素，
display:inline-grid 一个行内元素
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
定义网格的行数和列数
grid-template-columns 和 grid-template-rows
1、固定的行高列宽 行数，列数； （直接写）
2、按比例的行高和列宽， （repeat，百分比，fr）
3、不确定的行数，列数 （auto-fill）
4、不确定的行高和列数 minmax(1fr,2fr） 表示列宽不小于1fr，不大于2fr
2、列宽和行高
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; }
3、按比例列宽和行高
可以用fr，也可以用百分比。
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
.container { display: grid; grid-template-columns: 1fr 2fr; }
还可以与固定宽度结合：第一列的宽度为150像素，第二列的宽度是第三列的一半。
.container { display: grid; grid-template-columns: 150px 1fr 2fr; }
a、repeat（）
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
b、auto-fill 关键字
c、fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
d、minmax（100px， 1fr）
minmax（）函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
行间距和列间距
3、设置行间距和列间距 gap属性
一般设置固定值
row-gap属性设置行与行的间隔（行间距），column-gap属性设置列与列的间隔（列间距）。gap组合设置。
.container { grid-gap: 20px 20px; }
4、grid-template-areas 属性 定义区域（不懂）
.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-areas: 'a b c' 'd e f' 'g h i'; }
上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。
4、每个单元格里面的内容的垂直对齐、水平对齐
justify-items属性设置单元格内容的水平位置（左中右），
align-items属性设置单元格内容的垂直位置（上中下）。
.container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; }
这两个属性的写法完全相同，都可以取下面这些值。
start：对齐单元格的起始边缘。end：对齐单元格的结束边缘。center：单元格内部居中。stretch：拉伸，占满单元格的整个宽度（默认值）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
5、整个栅格布局在栅格容器里面的垂直对齐，水平对齐
justify-content属性是整个内容区域在容器里面的水平位置（左中右），
align-content属性是整个内容区域的垂直位置（上中下）。
.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; }
stretch 项目大小没有指定时，拉伸占据整个网格容器。
space-around :每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space -between: 项目与项目的间隔相等，项目与容器边框之间没有间隔======两端对齐，项目之间的间隔相等。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
项目属性
1、项目的位置，分别定位在哪根网格线，左右上下的网格线的位置。
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
.item-1 { grid-column-start: 2; grid-column-end: 4; }
1号项目的左边框是第二根垂直网格线，右边框是第四格垂直网格线。
grid-column 属性，
grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
2、项目的放在哪个区域。
grid-area属性指定项目放在哪一个区域。
结合grid-template-areas属性是网格布局中用于指定网格“区域”
3. 单个项目的单独设置单元格内容的水平位置，垂直位置。
justify-self 属性，
align-self 属性，
place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self属性是align-self属性和justify-self属性的合并简写形式。
.item-1 { justify-self: start; }