grid布局

1、块级网格布局
display: grid;

2、行内网格布局
display: inline-grid;

3、定义指定列的宽度：px值 百分比 fr比例值 auto repeat(次数, 重复值) repeat(次数, 重复模式)
grid-template-columns: 50px 50px 50px;
// 这里指定了三列，每列的宽度为50px
grid-template-columns: 25% 25% 25% 25%;
// 这里指定了四列，每列宽度为总宽度的1/4
grid-template-columns: 1fr 1fr 1fr 1fr;
// 这里fr单位表示占比
grid-template-columns: 100px auto 100px;
// 这里的auto自动占完剩下的空间
grid-template-columns: repeat(4, 1fr);
// 这里表示4列，每列为1fr
grid-template-columns: repeat(2, 1fr 2fr);
// 相当于grid-template-columns: repeat(1fr 2fr 1fr 2fr);

3、定义指定行的高度：px值 百分比 fr比例值 auto repeat(次数, 重复值) repeat(次数, 重复模式)
grid-template-rows: 40px 40px;
// 这里指定了两行，每行的高度为40px
grid-template-rows: 50% 50%;
// 这里指定了两行，每行的高度为1/2
grid-template-rows: 1fr 1fr;
// 这里fr单位表示占比
grid-template-rows: 100px auto 100px;
// 这里的auto自动占完剩下的空间
grid-template-rows: repeat(2, 1fr);
// 这里表示2行，每行为1fr
grid-template-rows: repeat(2, 1fr 2fr);
// 这里相当于grid-template-rows: repeat(1fr 2fr 1fr 2fr);

4、定义行之间的间距
grid-row-gap: 30px;
// 这里设置行之间的距离为30px

5、定义列之间的间距
grid-column-gap: 30px;
// 这里设置列之间的距离为30px

6、设置单元格中的内容的对齐方式
justify-items 控制单元格水平方向上的对齐方式
align-items 控制单元格垂直方向上的对齐方式
值可以是：start end center stretch(占满单元格)
place-items：<align-items> <justify-items>;

7、整个内容区域在容器中的对齐方式
justify-content：控制整个区域在容器中的水平对齐方式
align-content：控制整个区域在垂直方向上的对齐方式
place-content：<align-content> <justify-content>;
属性值可以是：start end center space-around space-between space-evently stretch

8、给网格布局指定区域
grid-template-areas：'a b c'
				    'd e f'
				    'g h i';
// 这里给每个网格设置名称，不需要设置名称的用圆点.代替

9、设置某个项目在容器中占用哪一个单元格：网格线 单元格名称
grid-row-start
grid-row-end
grid-column-start
grid-column-end
grid-row：<grid-row-start>/<grid-row-end>;
grid-column: <grid-column-start>/<grid-column-end>;
grid-area: a(通过grid-template-areas设置的网格名称)
// 这里表示本项目占用名称为a的单元格区域

10、定义项目中内容相对项目的对齐方式
justify-self
align-self
place-self：<align-self> <justify-self>;