在上一节介绍了Grid的基础知识，在前一节的基础上介绍Grid的新特性，怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。
可伸缩性单位
网格的目的是使我们能正确的控制网格布局，让我们的布局变得更容易。如果你还记得，我们在上一节定义的网格都是和像素有关。
grid-template-columns: 150px 20px 150px 20px 150px;
grid-template-rows: auto 20px auto 20px auto;
有没有可能，把这里的单位换成像em或者rem这样的相对单位，或者说像更先进的vh和vmin这样的单位。
在接下来的示例中，我们将把像素单位换成百分比。可以在列宽和间距中使用百分，但必须保证他们之间的总各为100%。
grid-template-columns: 30% 5% 30% 5% 30%;
注意间距
在Grid布局中确实有一个新的属性值，能更有效的方式来控制间距，可以说是特定的属性。我们可以使用grid-column-gap和grid-row-gap或者简写的grid-gap属性来定义列间距和行间距。
也就是说，我们没有必要通过网格轨道（行或列）来控制行和列之间的间距。这意味着每列的宽度和行宽度为：
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: auto auto auto;
看上去有点乱，但这是正常的。你会发现其中不同的是，列宽加起来的总宽度不到100%，那是因为它们之间的列间距将会补充上来。
重复
其实在网格布局中，有一个更适合的方法，那就是使用repeat()函数：
grid-template-columns: repeat(3, 33.33%);
这里的意思就是重复了三次33.33%，让我们三列的宽度是33.33%。而我们不需要在grid-template-rows中不需要显式去声明，其将以auto来分配（也就是其默认值）。现在，我们只需要显式声明我们想要的间距值：
grid-template-columns: repeat(3, 33.33%);
grid-gap: 20px;
grid-gap可以是固定单位，也可以是相对单位，这也意味着网格的间距是可以自适应的也可以固定的，而且不需要任何复杂的计算。
重置grid-column和grid-row的值
其中有什么不妥呢，实际上不需要通过grid-column和grid-row来声明网格项目，那是因为我们不需要显示的声明网格轨道。不过幸运的是，使用grid-gap声明网格间距即可。
fr单位
最后有一个可以让网格布局变得更简单，那就是fr单位。一个fr就是一个自动计算，也就想当于Flexbox布局中的flex:1，可以让网格占据容器可用空间。也就是说，在网格布局中，可能通过fr像下面这样声明网格中的列：
grid-template-columns: 1fr 1fr 1fr;
这里一共有三个fr，其中每个fr就相当于容器宽度的三分之一。这有另外一个例子：
grid-template-columns: 2fr 1fr 1fr;
这里表示有四个fr。第一列占据容器一半可用宽度，其容两个fr分别表示占用容器的四分之一宽度。
这些单位非常强大，尤其是和固定单位组合使用的时候：
grid-template-columns: 300px 1fr 3fr 20%;
上面的代码声明了四个列：
- 第一列的宽度是
300px - 最后一列的宽度是容器宽度的
20% - 然后是通过
fr来计算，也就是说第二列是容器剩余宽度的四分之一 - 第三列是容器剩余宽度的四分之三
看起来就像这样，下面的效果是一个完美的网格布局:
使用的代码：
.grid-1 {
display: grid;
width: 100%;
max-width: 750px;
margin: 0 auto;
grid-template-columns: 300px 1fr 3fr 20%;
grid-gap: 20px;
}
是不是比上一节变得更为简单。
回过头来，我们使用1fr来替代不准确的33.33%:
grid-template-columns: repeat(3, 1fr);
最后看到的效果如下：
总结
接下来回顾一下上面介绍的内容：
- 网格接受自适应和固定两种单位组合使用
- 不需要在
grid-template中声明网格间距，可以直接使用grid-gap来直接声明网格之间间距 - 在网格布局中不显式声明
grid-gap，可以使用自适应布局来自动计算他们之间间距 repeat()函数可以帮我们节省很多时间，而且更好的维护我们的网格布局fr是一个非常强大的单位，可以按百分比来布局网格
经过这两篇教程，你可以很好的掌握网格布局，而且可以使用网格制作一个简单的由局。在接下来的教程中，我们将一起学习网格区域方面的知识。帮助我们通过一些关键词实现一些跨区域的布局。
本文根据@Ian Yates的《CSS Grid Layout: Fluid Columns and Better Gutters》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://webdesign.tutsplus.com/tutorials/css-grid-layout-units-of-measurement-and-basic-keywords--cms-27259。
大漠
如需转载，烦请注明出处：http://www.w3cplus.com/css3/css-grid-layout-units-of-measurement-and-basic-keywords.html