为什么你应该立即使用 CSS Grid

大家好！

在这篇文章中，我将与大家分享我收集到的关于 CSS Grid 的一些信息，以及如何使用它来构建更简洁的标记，从而提高项目的可维护性，这只是它的众多优点之一。

CSS Grid 是众多横空出世、迅速走红的新兴技术之一，这让我们不禁怀疑它是否只是昙花一现。由于我们在 Web 开发领域早已习惯了这种现象，大多数人最终都会对尝试新技术持怀疑态度，并质疑其实际效果。

对我来说，CSS Grid 就是这样。我第一次听说它的时候就尝试了一下，还看了Wes Bos 的 CSS Grid 课程视频。我记得当时觉得它既有趣又让人望而生畏，因为它改变了你构建布局的思维方式。而且，我还想到由于它目前的兼容性问题，可能无法在实际项目中使用。如果我想用它，就必须添加大量的向后兼容代码，所以这对我来说行不通。

事实证明，我需要对这个主题进行更多研究，而且我很高兴我这么做了。这篇文章很大程度上受到了Morten Rand-Hendriksen 的演讲启发。

一些历史

CSS Grid 与任何其他获得官方批准并在浏览器中发布的规范一样，自 2012 年微软团队首次向 W3C 提出以来，经历了大量的讨论和实现。由于网格布局的概念已经存在了 20 多年，因此这并不是第一个被提出的规范（更多信息请点击此处）。

不同之处在于，这一次微软团队还展示了网格布局的实际实现。这有助于以更实际的方式评估该方案。此外，许多人开始尝试并传播它，因此涌现出了许多网格布局的实际案例。对我来说，这正是 CSS Grid 能够迅速在社区流行起来的关键因素之一，这真是太棒了！

此后，规范发生了很大变化，之前的大部分工作成果也被纳入考虑。因此，最初的方案也进行了许多补充和完善。

鉴于人们对CSS Grid这一新兴技术的热情，到2017年上半年末，Chrome、Firefox、Opera和Safari浏览器都已发布了对CSS Grid的支持。以下是其目前的支持情况：

文中提到的对 Opera 的支持仅限于 Opera Mobile。

有趣的是，微软是最后一家在 Edge 浏览器中发布更新版网格布局的公司。至于 IE10 和 IE11，它们支持的网格布局版本仍然是旧版本，而且看起来并没有更新的计划。

CSS Grid术语

与其他任何技术一样，了解相关的术语是学习 CSS Grid 的良好开端。在本节中，我将列出你在开始使用 CSS Grid 之前应该掌握的基本概念。

容器

这是网格布局的根元素，它包裹着网格内的所有其他元素。要定义一个网格容器，只需在要作为网格容器的元素中设置display相应的属性即可。grid

即使应用该规则后您不会看到任何变化，但现在您有了一个可以开始放置物品的网格容器。

物品

网格项是指网格容器的每个直接子元素。在上面的示例中，可以说所有元素span都是您创建的网格容器的项。

轨道

网格轨道指的是布局中的列和行。对于构建过基于网格的布局的人来说，这两个概念并不陌生，所以让我们看看如何在 CSS Grid 中定义它们。

在上面的示例中，您可以看到我们使用属性grid-template-columns来grid-template-rows定义布局中列和行的显示方式。传递给这些属性的每个值都代表我们创建的列和行的大小。

在这个例子中，我们定义了 3 列 1 行，其中第一列和最后一列的宽度为1fr（将在下一节中解释），中间一列的宽度是其两倍2fr。对于行，我们特意只定义了一行，但由于网格中需要放置的项目不止一个，系统会自动创建新行。第一行的高度固定为10rem，其余所有行的高度都相等，等于1fr。

分数单位

分数单位（或fr）表示列或行中可用空间的百分比。回顾上面的示例，你会发现第一行我们设置了固定高度，然后其余每一行都占用可用空间的百分比。简而言之，容器中剩余的高度将被平均分配到网格中剩余的行数。

值得注意的是，您并非总是需要手动定义所有列或行。当轨道数量较多时，可以使用repeat创建轨道模式的方法，如下例所示。

这里我们为列创建了一种模式。网格中每两列的宽度，1fr第一列为 1，2fr第二列为 2。行也遵循同样的规则。我建议你在 CodePen 中打开这个示例，尝试更多组合 :)

线条

您还可以根据床单编号来定位物品。创建 CSS 网格布局时，您可以指定物品的起始行和结束行。请参见以下示例。

您可以注意到，在示例中，我们使用行号来指定多个元素的位置。例如，span网格中的第二个元素水平位置在第 2 行到第 5 行之间（您可以参考红色线条，从 1 行开始，从左到右）。同样，span垂直位置在第 1 行到第 3 行之间（从上到下计数）。因此，第三个 span 元素会自动重新定位，因为第二个spanspan 元素占据了之前预留给第三个 span 元素的空间。另外，请注意，您可以使用简写属性grid-column来grid-row设置同一规则中元素的起始行和结束行。看看span第 5 个和第 6 个 span 元素是如何定位的，并尝试调整它们的位置 :)

细胞

在网格布局中，单元格是指您可以放置​​项目的每一个独立空间。基本上，您可以将项目放置在特定的单元格中，也可以放置在一组单元格中，方法是指定项目的起始点和结束点（如上一节所述），或者使用网格区域。

区域

网格区域定义了一个命名块，该命名块可用于在网格模板区域中放置项目。让我们来看看它是如何工作的。

在这个例子中，我们定义了一个网格模板区域，其中包含以下几个模块：页眉、侧边栏、主体和页脚。使用时，grid-template-area您可以根据每个模块的名称来指定所需的行数和列数。

定义好模板区域后，你需要将这些块名称链接到标记中的每个元素。我们通过使用grid-area属性来实现这一点，如上面的示例所示。将每个块分配到模板区域中的特定位置后，你可以尝试移动grid-template-area属性中的线条，你会发现无需重新排列标记即可移动元素。它就是这么简单！

有趣的是，如果你想在模板区域添加一些空白块，只需用点号代替任何块名称即可。请参见以下示例。

差距

通常来说，在元素之间留出一些间距是比较好的。你可以使用边距来实现这一点，但在 CSS Grid 中，有一种更好的方法，那就是使用 `mmargin`grid-gap属性。

CSS Grid 与 Flexbox

在短短一篇文章中引入了大量新概念和术语之后，你现在可能想知道 CSS Grid 相对于我们之前熟悉的 Flexbox 等方法的真正优势是什么。

这两种技术的一个重要区别在于，Flexbox 只能处理一维布局，因此你每次都必须考虑布局中的行或列。而 CSS Grid 则可以进行二维布局，这意味着你可以同时处理行和列！:)

对我而言，我对 CSS Grid 如此热情的主要原因在于，现在我们可以编写更简洁的标记语言。这种标记语言能够真正告诉你页面上实际存在的元素是什么，而无需div为了布局而创建额外的 <div> 或其他 HTML 标签。

请看这两个分别使用 CSS Grid 和 Flexbox 创建的示例。

CSS Grid

Flexbox

如果你查看这两个示例的 HTML 和 CSS 代码，你会发现 Flexbox 的标记看起来不如 CSS Grid 的标记美观。你可以看到，为了定位布局中更复杂的部分，Flexbox 需要创建额外的代码块。而 CSS Grid 则不需要额外的代码块，所有标记都是用户在页面上看到的实际内容。

结论

所以，如果你还有“为什么要使用 CSS Grid？”这个疑问，以下几点我想为你解答：

• 更清晰的标记
• 提高布局的可维护性和灵活性
• 由于可以同时处理列和行，因此更容易实现更复杂的布局。
• 目前支持率占全球网站流量的84.9%，所以绝对没问题。您不需要太多备用方案（当然，这取决于项目需求）。

今天就到这里啦！感谢阅读，欢迎留言告诉我你对 CSS Grid 的看法，以及你是否已经在生产环境中使用它 :)

实用链接

• 本文中使用的 Codepen 集合
• CSS Grid 的故事，来自其创建者
• 创建 CSS Grid - 微软 Edge 开发者秀
• 网格示例 - 瑞秋·安德鲁
• CSS Grid：从 CSS 框架转向 CSS Grid（2018 年及以后） - Daniel Koskinen
• CSS 网格改变了一切 - Morten Rand-Hendriksen
• 网格回退和覆盖