为什么 CSS Grid 比 Bootstrap 更适合创建布局

CSS Grid 是一种在 Web 上创建布局的新方式。这是我们第一次在浏览器中拥有一套原生可用的布局系统，这给我们带来了诸多好处。

如果将 CSS Grid 与最流行的框架 Bootstrap（顺便说一下，我们在这里创建了一个免费课程）进行比较，这些优势就更加明显。您不仅可以创建以前不引入 JavaScript 就无法实现的布局，而且您的代码也更易于维护和理解。

在本文中，我将解释原因。

注：我还创建了一个免费的 CSS Grid 课程。点击此处即可获得完整访问权限。

点击图片进入课程

现在让我们来看看我认为 CSS Grid 胜过 Bootstrap 的三大原因。

您的标记将更简单

用 CSS Grid 替换 Bootstrap 会让你的 HTML 更简洁。虽然这不是最重要的好处，但它很可能是你最先注意到的。

为了举例说明，我创建了一个网站的虚拟布局，以便我们比较两个版本所需的代码。代码如下：

注意：我为示例添加了一点设计。但这与 CSS Grid 和 Bootstrap 的比较无关，所以我将把这部分 CSS 放在代码示例之外。

引导程序

让我们首先看一下在 Bootstrap 中创建此网站所需的标记。

这里有两件事我希望你注意：

1. 每行都必须有自己的<div>标签。
2. 您必须使用类名来指定布局（col-xs-2）。
3. 随着布局变得越来越复杂，HTML 也变得越来越复杂。

如果这是一个响应式网站，标签通常会看起来更糟糕：

CSS网格

现在我们来看看 CSS Grid 的实现方式。HTML 代码如下：

我可以在这里使用语义元素，但我选择坚持使用 div，以便更容易地与 Bootstrap 示例进行比较。

我们一眼就能看出这个标记更简洁了。丑陋的 class 名和每行所需的额外 div 标签都消失了。它只是一个网格及其内部项目的容器。

与 Bootstrap 不同的是，随着布局复杂性的增加，这种标记的复杂性不会增加太多。

然而，虽然 Bootstrap 示例不需要你添加任何 CSS，但 CSS Grid 示例当然需要。具体来说，你需要添加以下内容：

对于某些人来说，这可能是支持 Bootstrap 的一个论点：您不必担心 CSS 来创建一个简单的网格，因为您只需在 HTML 中定义布局即可。

但是正如您在下一点中将会了解到的那样，标记和布局之间的这种耦合在灵活性方面实际上是一个弱点。

更加灵活

假设您想根据屏幕尺寸更改布局。例如，在移动设备上查看时，将菜单上拉至顶行。

换句话说，将布局从以下方式改变：

变成这样：

CSS网格

使用 CSS Grid 实现这一点非常简单。我们只需添加一个媒体查询，然后根据需要随意排列项目即可：

事实上，您可以像这样重新排列布局，而不必担心 HTML 是如何编写的，这被称为源顺序独立性，对于开发人员和设计人员来说，这是一个巨大的胜利。

CSS 网格允许你将 HTML 转换为它原本的样子。内容标记。而不是视觉效果，视觉效果应该放在 CSS 中。

引导程序

如果我们想在 Bootstrap 中实现同样的功能，实际上必须修改 HTML。我们必须将菜单标签移到第一行，除了标题之外，因为菜单被困在第二行了。

基于媒体查询实现这一点并非易事。这不能仅使用 HTML 和 CSS 来实现，所以你必须得动手写 JavaScript。

这个例子说明了迄今为止我使用 CSS Grid 所体验到的最大好处。

不再限制 12 列

这虽然不是什么大问题，但确实困扰了我好几次。由于 Bootstrap 网格被分成了 12 列，如果你想要 5 列、7 列、9 列，或者任何加起来不等于 12 列的布局，都会遇到麻烦。

使用 CSS Grid 就解决了这个问题。你可以让网格拥有你想要的精确列数。这是一个七列的网格。

这是通过设置grid-template-columns为 来完成的repeat(7, 1fr)，如下所示：

现在可能有一种方法可以绕过 Bootstrap 并使其正常工作。

我知道 Bootstrap 4 使用了 Flexbox，这也使得实现这一点成为可能。但 CSS Grid 确实让这类事情变得更容易实现。

浏览器支持

在结束之前，我们当然还要讨论一下浏览器支持情况。在撰写本文时，全球 92% 的网站流量都支持 CSS Grid。

然而，在你完全放弃使用 CSS Grid 的想法之前，我想听听Morten Rand-Henriksen对这个问题的看法，他认为 CSS Grid 是一个重新构建我们对向后兼容性思考方式的机会：

CSS 网格是一个布局模块；它允许我们在不影响文档源顺序的情况下更改其布局。换句话说，CSS 网格是一个纯粹的视觉工具，如果使用得当，它应该不会影响文档内容的传达。由此得出一个简单却令人惊讶的事实：旧版浏览器不支持 CSS 网格不应该影响访问者的体验，而应该只是带来不同的体验。

换句话说，由于您已将内容与视觉效果分开，因此所有访问者都将看到内容，但是，CSS Grid 将通过更好的布局增强那些支持它的用户的体验。

结语

最后，我想分享Mozilla 开发倡导者Jen Simmons 的一句话。她描述了我在了解 CSS Grid 之后对它的感受：

我使用 CSS Grid 越多，就越确信在其上添加一层抽象层没有任何好处。CSS Grid 就是一个布局框架，它直接嵌入到浏览器中。—— Jen Simmons

如果您确信 CSS Grid 代表未来，并且想要了解更多信息，请在此处查看我关于该主题的免费课程。

感谢阅读！我叫 Per，是Scrimba的联合创始人，Scrimba 是一款用于创建交互式编程截屏视频的新工具。如果您有任何问题或意见，请随时通过 Twitter 与我联系。