第八十二章 定义网格

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

那我们如何描述这些网格线的位置呢？想想我们自然语言（就是平时说话）怎么说：

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

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

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

• 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 这个单位简单直接的解决了这个问题。

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

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