先画出格子来,再往里面放东西。现在我们进行第一步,画格子。

那我们如何描述这些网格线的位置呢?想想我们自然语言(就是平时说话)怎么说:

  • 每隔五十像素画一根线;
  • 隔五十像素画第一根线,再隔三十像素画第二根线;
  • 把剩余的空间分成五份;

一般来说差不多就是这样,反正大家都听得明白,毕竟,这和小学手工课的要求也没什么区别了。

我们需要做的也就是这些描述,但是我们要先确定,二维布局,我们定义需要两个方向,有显式网格和隐式网格,所以每个方向上需要两次定义(这是指最复杂的情况)。

  • grid 说明这是网格布局中的属性,算是必备或者说固定的前缀;
  • rows row 就是行,不加复数就是一行,加上复数就是许多行。所以 rows 定义了水平的网格线之间的间隔。(因为是“行”,所以负责把“行”画出来;
  • columns 对应的就是列了,用来描述纵向网格线之间的间距;
  • template 模板的意思,所以这是显式网格;
  • auto 自动的意思,所以这是隐式网格。

这是很讲道理的拆开了讲解一下,方便记忆的。所以:

  • grid-template-columns 是在水平方向上定义显式网格的间隔;
  • grid-template-rows 是在垂直方向上定义显式网格的间隔;
  • grid-auto-columns 是在水平方向上定义隐式网格的间隔;
  • grid-auto-rows 是在垂直方向上定义隐式网格的间隔;

好,现在把上面两个小列表看两遍,就算明白啦哦~(觉得不直观也没关系,先把这一部分看完,再动手尝试下,大部分问题就解决了。

#grid-box {
  display: grid;
  grid-template-columns: 50px 30px;
}

这几个属性的定义方法都一样,所以我们只用一个举例。我们将这个容器设置为 gird 来说明我们要采用网格布局了。然后重点看下面的属性值,50px 30px。其实就是从最左边的容器的边框开始,先画下第一条线,隔 50 像素,画一条线,再隔 30 像素,再画一条线……

有好多条线怎么办?这么无限重复下去就行了,这是很简单无脑的。但,我们都是懒惰的,我就想每 50 像素一根线,怎么办?以前我们写的 CSS 都傻傻的不会思考的样子,这种问题好像无解,但是到了 CSS3,可以的!

#grid-box {
  display: grid;
  grid-template-columns: repeat(4, 50px);
}

repeat 是重复的意思,这个就是把每隔 50 像素画一根线这件事情重复四次。这很方便,也很厉害,但是不做展开,知道有,用的时候去查就对了。我们现在先纵览全局,否则会乱哦~

这些都比较的具有确定性,就算是用百分比也是具有确定性。我们来个更随意的一点的。那么引入一个新的单位 fr,这个就很随便(智能)了,它是网格布局中剩余空间的一等份。但是我们说等分的话,应该说先把东西平均分成“几”份,然后这个单位代表其中的“一”份,才对。现在直接说它是一等份,这就有点奇怪。

那我们举个例子:

#grid-box {
  display: grid;
  grid-template-columns: 50px 30px 1fr 3fr 5fr;
}

各个我们能看懂,先画第一条线,隔 50px 画线,再隔 30px 画线。那么后面……

我们在这里面用了多少个 fr?那么是 1+3+5=9 个。好,现在把剩下的空间分成九份,这一份的长度就是一个 fr。然后就不用解释了吧?

好处当然很多啦,首先不用复杂的计算。用百分比表达这个意思有点困难哦,还可能弄出来复杂的小数。而且,加上以后的某些属性之后,也会变得更加难于计算,但是 fr 这个单位简单直接的解决了这个问题。

那么网格划分的基础其实也就这么多,总而言之,怎么画线嘛,把事情说清楚了就好。

网格布局其实不难,但是复杂,因为十分繁琐。属性多,每个属性的值又有复杂的书写规则。我们先以最简单直接的方法走通,然后再补充细节,否则很容易深陷于一处,无法自拔。

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