1、首先需要在父容器中设置display 属性
display：grid //设置容器中子元素为栅格布局
2、其次最重要的就是确定容器中行数和列数，通过行数和列数形成具体的网格状布局，这也是栅格布局的由来
由两个属性 grid-template-columns 和 grid-template-row 来分别决定行数和列数
grid-template-columns:1fr 1fr 1fr //设置列数为3，fr为grid中的特殊单位,与flex布局中的无单位类似，表示在所占父容器宽度或高度的比重，这里表示3列各占父容器的宽度比为1：1：1，也就是平均分成3列
//如果某一列的有具体宽度，则由父容器宽度减去具体列宽之后，再对剩下的列进行按比重分配列宽
grid-template-columns:repeat(3,1fr) //此句与上一句效果相同，只是用repeat简化了书写方法，repeat 第一个参数表示重复次数，第二个参数表示宽或高
grid-template-rows:repeat(3,1fr) //设置容器行数为3 原理类似
在确定了行数以及列数以后容器中的子元素就会按照先从左往右，后从上到下的顺序排列
和flex布局中的流相似，grid的布局也可以修改这个排序的顺序
grid-auto-flow:column //此属性默认值为row 改成column后 元素排列顺序会变成先从上到下 后从左至右。
3、合并行或列是经常要用到的功能 ,grid布局提供了grid-row 和grid-column属性，这两个属性需要写在对应子元素当中才能生效
grid-row 实际是grid-row-start和grid-row-end的简写。grid-column写法也类似（grid-column-start和grid-column-end）
grid-row-start:1
grid-row-end:3 //根据start 和 end 确定这个子元素占据1-2行,注意并不是1-3行 个人觉得这个属性里的数字指代的并不是行，而是行与行之间所谓的间隔线（间隔线也是栅格布局的重要概念），所以这里是指第1条间隔线和第3条间隔线之间的两行。
grow-row:1/3 //这里也可以只提供一个值，只表示起始为位置，则效果就是仅仅修改元素位置，而不跨行，如果有两个值则中间要用 / 隔开