网格布局

1. 在父级元素上设置display:grid;表示为网格容器
2. 在父级元素上设置属性grid-template-rows表示你要将多个子元素排成几行；

// 表示将子元素排成四行，第二行和第四行均占50像素，第一行和第三行均占30像素
grid-template-rows: 30px 50px 30px 50px;

3. 父级元素上设置属性grid-template-columns表示你要将多个子元素排成几列；

// 表示子元素排成三列，第一列和第三列均占50像素，第二列占30像素
grid-template-columns: 50px 30px 50px；
// 表示自动根据容器的宽度去排放，每个单元格占33像素，直到当前行拍满，多余的会自动换行
grid-template-columns: repeat(auto-fill,33px);
// 表示第二列的宽度可以设置最大值和最小值，当前行有多余的位置取最大值，没有取最小值
grid-template-columns: 30px minmax(30px,100px) 30px;
// 表示第二列auto适应容器宽度，当有剩余位置时，auto取当前行所有剩余宽度撑开
grid-template-columns: 30px auto 30px 30px;

4. 合并行间距和列间距写法

// 合并（第一个表示网格容器内每行之间的间距，第二个是列之间的间距）
grid-gap：行间距 列间距；
// 单独行（表示网格容器内每一行中间的行间距为10像素）
grid-row-gap：10px;
// 单独列（表示网格容器内的每一列之间的列间距为10像素）
grid-column-gap：10px;

5. grid-auto-flow: column;表示将网格容器内的子元素分别按照先列后行的排列顺序
6. 合并每个子元素在单个网格内的水平和垂直方向上的位置

// 合并(第一个值是垂直方向上的位置是否居中，第二个值是水平方向上的位置是否居中；)
place-items: 垂直方向  水平方向;
// 单独(表示设置子元素在父容器内的水平位置是否居中或左右两边展示)
justify-items：center；
// 单独(表示设置子元素在父容器内的垂直位置是否居中或上下两边展示)
align-items：center；

7. 合并网格容器中所有子元素为整体的水平和垂直方向位置

// 合并
place-content：垂直方向位置  水平方向位置；
// 单独(父级容器内所有的子元素作为一个整体在容器内的水平位置)
justify-content：center；
// 单独(父级容器内所有的子元素作为一个整体在容器内的垂直位置)
align-content：center；