css 网格布局
在本教程中，我们将采用上一教程中的网格，并将其用作游乐场以进一步研究Grid。 我们将改进定义装订线的方式，探索灵活的布局，fr单位，并引入repeat()函数。
弹性单位
Grid的全部目的是使我们能够正确地控制Web上的布局，因此让我们在进行下一步之前先使静态网格流畅。 您还记得吗，我们使用静态像素测量来定义网格：
grid-template-columns: 150px 150px 150px;grid-template-rows: auto auto auto;grid-gap: 20px;
也有可能在这里使用其他单位，例如ems或rems。 甚至更多不寻常的单位，例如vh和vmin 。
在这种情况下，我们将更改像素单位的百分比。
grid-template-columns: 33.33% 33.33% 33.33%;
嗯，这有点混乱，但这确实可以完成工作。 您会注意到，列宽现在总计达到100％； 我们的装订线会自动从中减去。grid-gap将接受固定或灵活的单位，这意味着我们可以完美地组合流体柱和固定槽，而无需进行任何复杂的计算。
重复
让我们使用repeat()函数将其编写为更整洁的方式：
grid-template-columns: repeat(3, 33.33%);
这表示“重复三次重复33.33％”，从而为我们提供了三列。 而且我们甚至不需要grid-template-rows声明，因为无论如何，auto值都被分配为默认值。
注意：当使用％值定义列时，它们将完全使用这些值，并在顶部添加任何grid-gap。 您会注意到上面的网格已被推到右侧，因为它现在的宽度为99.99％，外加网格间隙。
fr单位
可以对我们的简单网格进行最后的改进，它将解决我们刚刚提到的宽度问题； 我们将介绍fr或小数单位。 单个fr单位描述为“一件，无论我们将其分成多少件”。 例如，我们可以使用以下方法声明我们的列：
grid-template-columns: 1fr 1fr 1fr;
这里总共有三个fr单位，所以每列将是三分之一宽。 这是另一个例子：
grid-template-columns: 2fr 1fr 1fr
现在总共有四个fr单位，因此第一列将占用可用宽度的一半，而其他两列则各占四分之一。
这些单位确实功能强大，尤其是与其他度量单位结合使用时：
grid-template-columns: 300px 1fr 3fr 20%;
在这里，我们声明了四列：
第一个固定为300px宽 最后是网格容器元素宽度的20％ 然后计算fr单位，同时也考虑到装订线，在第二列中留出一块剩余空间 第三块有三块。
看起来像这样，当我们的九个项目移动以填补空白时，完美地突出了自动放置：
但是回到我们原来的网格。 让我们用1fr替换笨拙且不准确的33.33％的值：
grid-template-columns: repeat(3, 1fr);
成品笔：
结论
因此，回顾一下：
仅两个教程，我们已经走了很长一段路，但是您现在是一个非常简洁简洁的网格的骄傲拥有者！ 在下一个教程中，我们将探索网格区域，看看span关键字和一些实际的布局。
翻译自: /tutorials/css-grid-layout-units-of-measurement-and-basic-keywords--cms-27259
css 网格布局
