如何使用CSS网格在每隔一列中设置不同的行高？

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px 200px;
}

.grid-item:nth-child(even) {
  grid-row: span 2;
  /* 行高为50px */
}

.grid-item:nth-child(odd) {
  grid-row: span 1;
  /* 行高为100px */
}

<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 class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px 200px;
}

.grid-item:nth-child(even) {
  grid-row: span 2;
  /* 行高为50px */
}

.grid-item:nth-child(odd) {
  grid-row: span 1;
  /* 行高为100px */
}
</style>