先来一个简单的 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 四个属性的简写属性(复合属性)。这就很乱……所以一定要小心使用。

【本章助记卡片:卡片 for 第八十四章