CSS Grid 比 Bootstrap 更适合布局，为什么？

CSS 网格 是一种创建布局的全新方式。这是有史以来第一个正确的布局系统，并且是浏览器原生的。它给我们带来了很多好处。

当您将其与当今最流行的框架Bootstrap 进行比较时，网格的好处尤其明显。您不仅可以创建以前在不引入 JavaScript 的情况下无法实现的布局，而且您的代码将更易于维护和理解。

在这篇文章中我将解释原因。

标签会更干净

与 Bootstrap 相比，使用网格将使您的 HTML 更干净。尽管这不是最重要的好处，但它可能是您首先注意到的。 。

为了便于说明，我创建了一个布局，以便我们可以比较两个版本所需的代码。

注：我在上面的例子中稍微做了一些样式，但这与我们的比较Bootstrap无关，所以我只保留了布局部分的CSS

Bootstrap⿙先看一下以下是 Bootstrap 必须创建的标签 。

这里需要注意两点：

• 每行需要一个
  标签❙❙（

  使用类名来指定 x ） ） 。 随着此布局的复杂性增加，HTML 也随之增加。

  如果是响应式网站，看起来会更复杂：
  

  现在让我们看看网格布局：
  

  这里我可以使用 div 元素和 Bootstrap 。

  显然，网格布局看起来更简单。丑陋的类名和每行所需的额外 div 标签都消失了。这只是容器和里面的物品。

  和Bootstrap的区别在于，随着布局复杂度的增加，网格布局标签的复杂度并没有增加太多。

  Bootstrap示例中无需添加任何CSS，只需引用即可。 CSS 网格 必须添加。具体来说，是这样的：
  

  对于某些支持Bootstrap的人来说，这可能是一个论点：你不必担心 CSS，只需在 HTML 中定义布局即可。然而，正如您所理解的，标签和布局之间的连接在灵活性方面可能会成为一个大问题。

  更灵活

  假设您想根据屏幕尺寸更改布局。例如，将菜单拖到顶行以将其显示在移动设备上。

  换句话说，布局将从：

  更改为：

  CSS Grid

  使用CSS Grid非常简单。我们只需要添加媒体查询，布局就会像变魔术一样变成你想要的样子。

  您可以像这样重新排列布局，而不必担心 HTML 标记的写入顺序。这对于开发者和设计师来说是一个很大的好处！

  BootStrap

  如果您想在Bootstrap中执行相同的操作，您需要编辑 HTML 并调整标签顺序。

  对于这个请求，不仅媒体查询就足够了，还需要使用 JavaScript。

  这个例子是我经历过的网格最大的优点

  不再局限于12列

  问题不大，但是这个问题让我担心了很多次，因为Bootstrap 系统分为12列。如果您想要 5 列布局，您会感到困惑，或者 7 列、9 列或任何不会组合成 12 列的布局。

  CSS网格没有限制，您可以根据需要创建任意数量的网格。这是一个7列的网格：

  通过设置 grid-template-columns :repeat(7, 1fr)来实现，像这样：

  当然，浏览器支持也必须讨论，截至撰写本文时，全球 75% 的网站流量支持 CSS Grid

  CSS Grid 是一个布局模块，允许我们在不影响标签顺序的情况下更改文档的布局。换句话说，CSS网格是一个纯粹的视觉工具，如果使用正确，应该不会影响文档内容的表达。因此：旧版浏览器中缺乏对 CSS Grid 的支持不会影响访问者体验，只会使体验有所不同。