CSS Grid 布局：替代 Flex 布局的强大工具

可以使用 CSS Grid 布局来代替 Flex 布局。CSS Grid 布局是一种二维网格布局系统，可以让我们更轻松地在网页上创建复杂的布局。它与 Flex 布局不同，它不是一维的，而是二维的。

下面是一个简单的例子，使用 CSS Grid 布局来创建一个基本的网格布局：

HTML 代码：

<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
  <div class='item'>6</div>
</div>

CSS 代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
}

在这个例子中，我们使用了 CSS Grid 布局来创建一个包含 6 个项目的容器。我们使用了 `display: grid;` 来启用 CSS Grid 布局，并使用 `grid-template-columns` 指定了 3 列，每列的宽度相等。我们还使用了 `grid-gap` 来添加网格项之间的间隔。最后，我们定义了一个基本的样式来显示每个项目的背景颜色和填充。

通过使用 CSS Grid 布局，我们可以更轻松地创建复杂的布局，比如网格、响应式布局、瀑布流布局等。