中container，我们设置了两个div，分别是cell-1和cell-2。.cell-1{背景颜色：绿色；网格行：2/4；网格列：1/3；}.cell-2{背景色：黄色；网格行：4/6；grid-column:3/6;}根据上面的代码，我们设置了两个子div的背景色和行列位置。生成的图形如下：grid-row:num/num和grid-column:num/num表示从哪一行到哪一行的行或列方向的值，这些线在网格布局中称为==网格线==。除了这种写法，我们还有其他几种写法：第二种写法：.cell-1{background-color:green;网格区域：2/1/4/3；}.cell-2{背景色：黄色；grid-area:4/3/6/6;}grid-area:grid-area定义的顺序是grid-row的第一个网格线值，grid-column的第一个网格线值，grid的最后一个网格线-row的值，grid-column的结束网格线值。第三种写法：.cell-1{background-color:green;网格行：2/跨度2；grid-column:1/span2;}.??cell-2{background-color:yellow;网格行：4/跨度2；grid-column:3/span3;}grid-row:num/spannum和grid-column:num/spannum表示从网格线延伸几格。一般第三种方法比较常用。最后一种方法是因为在我们的实际项目中，是无法看到网格线的具体编号的。在最后一种方法中，我们需要定义网格线的坐标值，直接根据坐标值进行定位。#grid-container{显示：网格；宽度：500px；高度：500px；背景色：#eee；网格模板行：[Y1]100px[Y2]100px[Y3]100px[Y4]100px[Y5]100px[Y6];grid-template-columns:[X1]100px[X2]100px[X3]100px[X4]100px[X5]100px[X6];}我们直接在父容器中设置网格线坐标。行方向设置为Y轴，列方向设置为X轴。那么我们直接从css代码中就可以一目了然的知道网格线的坐标轴了。.cell-1{背景颜色：绿色；网格行：Y1/Y4；网格列：X1/X3；}.cell-2{背景颜色：黄色；网格行：Y4/Y6；grid-column:X3/X6;}原来的写法可以改成这种写法。一目了然。GridAreas网格的分界线称为网格线，网格中的网格称为网格区域。或者直接用代码演示：#grid-container{display:grid;宽度：500px；高度：500px；背景色：#eee；网格模板行：[Y1]100px[Y2]100px[Y3]100px[Y4]100px[Y5]100px[Y6];网格模板列：[X1]100px[X2]100px[X3]100px[X4]100px[X5]100px[X6];grid-template-areas:"headerheaderheaderheaderheader""navmainmainmainmain""navmainmainmainmain""navmainmainmainmain"".footerfooterfooter.";}我们直接定义grid的值-template-areas，如上面的代码。这里定义的值表示为每个框设置一个别名，而.表示忽略框：