先来一个简单的 grid-column-gap / grid-row-gap / grid-gap，是说网格线的粗细，默认粗细当然是 0 了，你也可以自定义，但没有颜色，其实也就是网格单元格之间的间隔。最后一个是前两个的复合属性。
这有啥可讲的？对于现在的我们，最多也就是演示一下效果而已。不过，这难道不应该自己操作么？懒虫啊！你们像我一样懒是吃不饱饭的啊！怎么别的不学，光是学我的缺点呢。
不过要说这个间隔也是占用父元素空间，所以也就影响了子元素们可以使用的空间。于是计算子元素尺寸就变得更复杂了。所以 fr 的优点就体现出来了，剩余可用长度，可是可以自动把间距排除的哦~
提示：在检查元素的时候可以清楚地看到网格，这就十分方便了，也很有趣。
然后还有什么呢？流！就是 flow 啊。这个我们在 第七十六章 一些共性 里面提到过，在讲弹性布局的时候也是最先说的这个问题，那么网格布局里，为啥我们一直没提它，不重要了么？
很重要，但是这个很简单啊。这个属性叫做 grid-auto-flow。注意哦，有一个 auto，这可说明了大问题。你想啊，我们如果想上节课中那样，指定了某个元素所在的区域，那么是不是这个元素和“流”没多大关系了，差不多就相当于把元素钉在那里了。所以只有在你没指定具体位置，只是被“流”（默认规则）驱动的情况下，才会受到这个属性的影响。
说的这么热闹，这个属性是做什么的呢？就是说这些元素该怎么排列。你看弹性布局里主轴方向是可以改变的，就意味着元素的排列方向可以随之改变，横向排列，或者纵向排列。现在我们有两个轴，固定了，不动了，但是想要达到的效果还是要有的。
- row：告诉自动布局算法依次填充每行，根据需要添加新行（默认）；
- column：告诉自动布局算法依次填充每列，根据需要添加新列；
- dense：告诉自动布局算法，如果后面出现较小的 grid item，则尝试在网格中填充空洞；
就是一个横排一个竖排，多简单。至于最后一个么，你可能固定了其中几个元素。那么其余元素呢？优先用来填补前面的空白（如果尺寸合适的话）。可以说是十分的智能了呢！
然后说一下嵌套，父元素作为容器设置为 display: grid;，这个我们前面用过了。而子元素里面如果还需要使用网格布局，则要把子元素设置为 display: subgrid;，就是子网格的意思。
然后还有一个不是细节的细节（其实这些都不是细节，只是我们在认识阶段，这些属性并没那么大的影响，不作为第一批必须掌握的内容而已）。可能有同学觉得，说网格，说棋盘，我不管你说什么，反正你这东西不直观，我就不懂，我就学不会，你打我呀！
还真有一个直观的不要不要的方法。差不多就是摆棋盘这件事情本身了。不过在这之前，我们要给每一个棋子取名字。就是给每一个子元素设置 grid-area 属性，对，这就是网格区域的一种表现吧。反正取名字，你别搞怪，老老实实用英文数字减号和下划线命名，记得第一个字符必须是英文就没啥错。如果讲究点，就连减号也别用，免得出现意外。
然后就是摆棋盘，这是定义在父元素中的，因为要指挥所有棋子，所以这事你得交代给棋盘才行，毕竟和某一个棋子说就很不合理。
grid-template-areas 属性用来画棋盘，每一对引号里面代表一行，在里面摆放棋子，棋子之间用空格分隔，某个位置没有棋子就写 .。
我这么说肯定不够直观，我们看一下代码就清楚了。
<div class="grid-box"><div class="grid-item"></div></div>.grid-box {display: grid;min-height: 300px;border: 2px solid #DEDEDE;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr 1fr;grid-template-areas: ". chess ."". chess ."". . .";}.grid-item {min-height: 100px;grid-area: chess;background: #DEDEDE;border: 2px solid white;}这样就可以一次把所有子元素给安排上了，方便！
但是啊，grid-area 属性还是 grid-column-start / grid-column-end / grid-row-start / grid-row-end 四个属性的简写属性（复合属性）。这就很乱……所以一定要小心使用。
暂无评论内容