3 月份，Mozilla 发布了 Firefox 52，其中添加了对 CSS Grid 布局的支持。如果您不熟悉 CSS Grid，它是一种用于网络的二维布局系统，允许我们使用浏览器中的本机方法创建布局模式。这意味着我们可以使用几行 CSS 代码轻松地重新创建熟悉的网格。这也意味着我们可以使用 CSS 和布局完成以前不可能完成的事情……不过我们稍后会详细介绍。

简短说明：本文并非旨在成为 CSS Grid 的全面入门教程，而是假设您对 CSS Grid 有一定的了解。如果您还没有，我建议您查看 MDN 上精彩的 CSS Grid 布局页面。

网络上的布局一直很棘手。当网络首次推出时，没有布局方法。然后出现了表格（在表格中，在表格中，在表格中）。虽然很笨拙且奇怪，但它确实有效。当 CSS 在 90 年代后期推出时，开发人员能够开始使用 div 和浮动来进行设计和布局。这最终导致了框架和网格系统，这些系统有助于理解所有“陷阱”，例如清除浮动、负边距、响应式设计等等。而这就是多年来的情况。有 数千个 网格系统，但它们或多或少都一样。

现在 CSS Grid 布局已成为现实，我想看看用 CSS Grid 替换现有网格框架需要什么。在本实验中，我选择了流行的 Bootstrap 框架。

我首先使用 Bootstrap 网格创建了一个基本网站

在 CodePen 上查看.

因此，让我们来分解它并将其转换为使用 CSS Grid。

在 Bootstrap 中，.container 类包装所有内容并设置宽度限制。它还会在左右边缘添加填充，并将所有内容居中。这里没有太多要更改的。与 Bootstrap 一样，容器类对于使用 CSS Grid 非常方便。我这样重新创建它

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

我们还可以通过添加以下内容来添加响应断点

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}<code>

Bootstrap 使用 .row 类来包装列并提供左、右负边距以抵消单个列添加的填充。诸如负边距之类的技巧在使用 CSS Grid 时不再需要，但如果您阅读了 文档，您就会知道 CSS Grid 需要一个网格容器。.row 类是执行此操作的最佳位置。让我向您展示我的操作，然后我们来分解它。

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

display: grid 创建网格容器。

grid-template-columns 属性定义网格的列。您可以使用空格单独定义每列，但这里我们使用 repeat 表示法定义 12 个等大小的列。1fr 指的是单个列的宽度。MDN 将fr 单位定义为一个新的单位，该单位“表示网格容器中可用空间的一部分。” 您可以在 MDN 上阅读有关 fr 单位 的更多信息。您还可以阅读有关 grid-template-columns 属性 的更多信息。

最后，grid-gap 属性是一个简写属性，它定义了列之间和列行之间的空间量。可以把它想象成我们的间距。您可以在这里阅读有关 grid-gap 的更多信息。

现在，只剩下列类了。Bootstrap 使用 .col-md-6 或 .col-lg-8 等列类来确定 div 应跨越的列数。它还会使 div 浮动并在左侧和右侧添加填充以在列之间创建间距。由于 .grid-column 简写属性的存在，重新创建这些类非常容易。例如，如果我们想要重新创建 .col-md-6 类，我们可以使用以下代码

@media (min-width: 992px) {
    .col-md-6 {
        grid-column: span 6;
    }
}

很简单，对吧？没有浮动。没有填充。它只需工作。grid-column 简写指定了项目的尺寸和位置。我们可以使用 span 来指示此特定项目应跨越六列。由于包装器的 grid-gap 属性，间距会自动处理。您可以在此处了解有关 grid-column 属性 的更多信息。

那么，将所有内容组合在一起会发生什么呢？好吧，网站看起来完全一样，但我们可以完全删除 Bootstrap 依赖项并使用本机 CSS Grids。

在 CodePen 上查看更新后的网站.

这种类型的实验是一个有趣的学习练习，但也可能很危险。借用一位睿智的 哲学家杰夫·高布伦 的一句台词

“你……太专注于自己是否能做到，而没有停下来想想自己是否应该做到。”

我们不想通过将 CSS Grid 塞入限制其潜力的语法中来限制它。我们能够轻松地重新创建 Bootstrap 网格，但 CSS Grid 比以前任何网格系统都强大得多。这是因为它是一个从头开始构建的网络本机解决方案。

我们不再局限于从左到右浮动的 12 列网格。您想将元素放置在网格上的精确位置，与它们的 HTML 源代码顺序无关吗？试试看。您想创建跨越多个列和行的项目吗？没问题。查看 Mozilla 的 Craig Cook 创建的 这个演示，它展示了各种布局模式。尝试使用 Bootstrap 重新创建其中一些布局（提示：不可能）。我们只是触及了 CSS Grids 的功能表面。

如果您想了解更多关于 CSS Grid 的信息，请查看以下资源

Mozilla CSS Grid 演示
MDN 上的 CSS Grid 文档