CSS Grid 是否取代 Flexbox？

.ad {
  grid-column-start: 1;
  grid-column-end: 3;
}

我们在上面的代码中说的是“从第一列开始此 div，并在最后一列结束。” 它应该看起来像这样

查看 CodePen 上 Robin Rendle (@robinrendle) 编写的 Flexbox 和 Grid。

此外，假设我们始终希望我们的广告块是第一行的两倍大小——我们可以做到！我们只需要使用 grid-template-rows 属性即可

.grid {
  display: grid;
  max-width: 800px;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr 1fr;
}

这相当于说：“网格中有三行。始终确保第二行是第一行和第三行大小的两倍。”换句话说，我们在行与其他行之间创建关系，同时还定义网格中的列数！

查看 CodePen 上 Robin Rendle (@robinrendle) 编写的 Flexbox 和 Grid。

使用 CSS Grid，我们可以同时水平（使用 grid-template-columns）和垂直（使用 grid-template-rows）设置关系。另一方面，Flexbox 只能执行垂直或水平布局（使用 flex-direction），但这并不意味着我们应该放弃它。

可能令人困惑：“2D” Flexbox 布局

可能有点令人困惑的是，在 Flexbox 中创建多维布局并非不可能。例如

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 Flexbox 的“网格”。

那里肯定有行和列，甚至有一个跨越多个列的最终元素。它易于构建且灵活。它是通过在容器上启用 flex-wrap、使子元素的 flex-basis 成为容器宽度的 1/3 以及在需要时允许 flex-grow 拉伸子元素来实现的。（flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。）

这并没有错，这只是执行此类操作的一种方法，您可能可以争辩说它不太直观且适应性不强。

可能令人困惑：“1D” 网格布局

Grid *可以*执行 2D 布局，这意味着定义 grid-template-rows 和 grid-template-columns，但它不必同时使用两者。这是一个仅使用它在一行中水平放置框的演示

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 使用 Grid 创建简单列。

这也没有错。实际上，您可以很容易地争辩说，这比使用 Flexbox 更易于理解和更简洁地表达。例如，子元素根本不需要任何布局属性。但是您也可以争辩说，像这样的纯 1D 布局在 Flexbox 中更强大，因为 Flexbox 允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧、更改其顺序、均匀地间隔它们等）。

关于嵌套

再次强调一下！

这一点需要记住：网格项目可以是 Flex 父级。

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 使用 Grid 创建简单列。

并且，Flex 项目可以是网格父级

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的 使用 Grid 创建简单列。