一起使用 grid 和 flex

随着网页设计的发展， CSS 的布局也随之不断发展。其中， grid 和 flex 可以说是两种比较流行的布局方式。

什么是 grid？

Grid 是一种二维的布局系统，可以更加精确地控制元素的布局。使用 grid 必须要在父容器上定义 display: grid，子元素则可以通过 grid-template-columns 和 grid-template-rows 来定义它们的布局。其优势在于可以按照网格的性质以及行和列的组合定义网页布局。

如何使用 grid？

以下代码片段展示了使用 grid 所需要的基本步骤：

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

在上述代码中，我们定义了一个由三个子元素组成的容器，并使用 grid-template-columns 定义了子元素的布局，这里我们定义了三个等大列。

什么是 flex？

Flex 是一种一维的布局系统，可以很快地实现元素的水平或垂直布局。使用 flex 必须要在父容器上定义 display: flex，子元素则可以通过 flex-basis 和 flex-grow 来定义它们的布局。其优势在于可以快速实现元素的垂直或水平布局。

如何使用 flex？

以下代码片段展示了使用 flex 所需要的基本步骤：

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

在上述代码中，我们定义了一个由三个子元素组成的容器，并使用 flex-direction 定义了子元素的布局方向，这里我们定义了水平方向布局。

grid 和 flex 的关系

在实际开发中，我们可以结合使用 grid 和 flex 来实现更加复杂和多样化的布局。例如，在大型网页中常常需要多个模块的布局，并且这些模块又需要按照一定的比例来展示。这时候，我们可以使用 grid 和 flex 结合起来实现这个需求。

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item-1 {
  background-color: red;
  display: flex;
  flex-direction: column;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: blue;
}

.item-4 {
  background-color: yellow;
}

.item-5 {
  background-color: pink;
}

在上述代码中，我们定义了一个由五个子元素组成的容器，使用 grid 定义了前三个子元素的布局。然后，我们又对第一个子元素使用了 flex 定义了垂直方向的布局。

总的来说，我们可以使用 grid 和 flex 结合起来实现更加复杂和多样化的布局，满足我们网页设计的需要。