网格布局使用
①在父级元素上设置display:grid;表示为网格容器
②在父级元素上设置属性grid-template-rows表示你要将多个子元素排成几行；
点击查看代码
eg: grid-template-rows: 30px 50px 30px 50px;表示将子元素排成四行，第二行和第四行均占50像素，第一行和第三行均占30像素
③父级元素上设置属性grid-template-columns表示你要将多个子元素排成几列；
点击查看代码
eg：grid-template-columns: 50px 30px 50px；表示子元素排成三列，第一列和第三列均占50像素，第二列占30像素
eg：grid-template-columns: repeat(auto-fill,33px);表示自动根据容器的宽度去排放，每个单元格占33像素，直到当前行拍满，多余的会自动换行
eg：grid-template-columns: 30px minmax(30px,100px) 30px;表示第二列的宽度可以设置最大值和最小值，当前行有多余的位置取最大值，没有取最小值
eg：grid-template-columns: 30px auto 30px 30px;表示第二列auto适应容器宽度，当有剩余位置时，auto取当前行所有剩余宽度撑开
④合并行间距和列间距写法
点击查看代码
合并eg：grid-gap：行间距 列间距；第一个表示网格容器内每行之间的间距，第二个是列之间的间距
单独行eg：grid-row-gap：10px;表示网格容器内每一行中间的行间距为10像素
单独列eg：grid-column-gap：10px;表示网格容器内的每一列之间的列间距为10像素
⑤grid-auto-flow: column;表示将网格容器内的子元素分别按照先列后行的排列顺序
⑥合并每个子元素在单个网格内的水平和垂直方向上的位置
点击查看代码
合并eg：place-items: 垂直方向 水平方向;第一个值是垂直方向上的位置是否居中，第二个值是水平方向上的位置是否居中；
单独eg：justify-items：center；表示设置子元素在父容器内的水平位置是否居中或左右两边展示
单独eg：align-items：center；表示设置子元素在父容器内的垂直位置是否居中或上下两边展示
⑦合并网格容器中所有子元素为整体的水平和垂直方向位置
点击查看代码
合并eg：place-content：垂直方向位置 水平方向位置；
单独eg：justify-content：center；父级容器内所有的子元素作为一个整体在容器内的水平位置
单独eg：align-content：center；父级容器内所有的子元素作为一个整体在容器内的垂直位置
