如何使用 CSS 使 div 跨越网格中的两行？

在 CSS Grid 中，可以轻松地使用 grid-row 属性使元素跨越网格中的多行。以下是如何使用 grid-row 属性使 div 跨越两行的示例代码：

<div class="grid-container">
  <div class="grid-item first">1</div>
  <div class="grid-item second">2</div>
  <div class="grid-item third">3</div>
  <div class="grid-item fourth">4</div>
  <div class="grid-item fifth">5</div>
  <div class="grid-item sixth">6</div>
  <div class="grid-item seventh">7</div>
  <div class="grid-item eighth">8</div>
</div>

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

.grid-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

.first {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.second {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.third {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.fourth {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.fifth {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.sixth {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.seventh {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.eighth {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

在以上代码中，我们创建了一个包含八个网格项的网格容器。要跨越两行，我们需要在具有 grid-row 属性的项中将值设置为 1 / 3，这将使该项跨越第一行和第二行。

在这个例子中，网格项 third 是需要跨越两行的项。所以我们设置了 grid-row: 1 / 3; 来使其跨越第一行和第二行。

希望这个小例子能够帮助你更好地理解如何使用 CSS Grid 来使 div 跨越网格中的两行。