独立设置CSS Grid等高行

要实现独立设置CSS Grid等高行，可以使用以下代码示例：

HTML代码：

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

CSS代码：

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

.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
  /* 设置等高行 */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-item:first-child {
  grid-row: span 2;
}

在这个示例中，使用grid-template-columns: repeat(3, 1fr);将网格分为3列。然后，为了实现等高行，我们将.grid-item设置为align-self: stretch;，这样每个网格项都会拉伸以填充整个行高。为了使第一个网格项跨越两行，我们使用grid-row: span 2;。

这样就可以实现独立设置CSS Grid等高行的效果了。