正确使用 CSS Grid

Violet Peña 分享了她关于如何使用 CSS Grid 的建议。它们基本上可以归结为以下要点

1. 使用名称而不是数字来设置网格列。
2. fr 应该是我们选择的灵活单位。
3. 我们不再真正需要网格系统了。

尽管这些都是很棒的建议，Violet 也提供了一些例子来支持她的建议，但我特别喜欢她关于学习 CSS Grid 的说法

“学习” CSS Grid 需要培养对许多新属性的工作知识，这些属性不仅描述外观或行为的一个方面，而且会融入一个全新的布局系统。这个系统包括大约 18 个属性，这些属性使用在 CSS 规范的其他任何地方很少（或从未）见过的范例和语法。

这意味着 CSS Grid 具有相当高的技能门槛——开发人员需要学习并内化大量新信息才能有效地使用它。一旦你超过了这个技能门槛，Grid 就是布局创建中一个了不起的盟友。低于这个技能门槛，Grid 就会成为一个累赘。你会想知道为什么要费心使用它，因为它似乎需要付出很多额外的工作才能获得很少的回报。

在这篇文章中，我想通过向您展示利用 Grid 规范的最有效方法来帮助您克服这个技能门槛。

此外，这篇文章让我想起，虽然我不确定为什么，但我倾向于避免为我的网格列命名。就像 Violet 带我们浏览的这段代码一样

.container {
  display: grid;
  grid-template-columns: [sidebar] 3fr [content] 4fr;
}

现在，当我们定义 grid-column 时，我们可以使用 sidebar 或 content 名称，如下所示

.content {
  grid-column: content;
}

我真的很喜欢这样！它看起来超级易读，如果我们想改变 .content 类的大小，只需要回到最初定义网格的地方即可。无论如何，从现在开始我都会确保为我的网格列命名。

直接链接 →