css 网格布局_CSS网格布局：流体列和更好的装订线

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关键字和一些实际的布局。

翻译自: https://webdesign.tutsplus.com/tutorials/css-grid-layout-units-of-measurement-and-basic-keywords--cms-27259

css 网格布局