null

* {
  box-sizing: border-box;
}

.grid-cont {
  background-color: black;
  padding: 5px;
  display: grid;
  grid-gap: 2px;
  grid-template-columns: auto auto auto auto auto;
}

.grid-item {
  background-color: white;
  text-align: center;
  vertical-align: middle;
  padding: 40px 0;
  font-size: 20px;
}

.grid-item-6 {
  grid-column: 1 / span 5;
  grid-row: 2 / span 2;
}

<div class="grid-cont">
  <div class="grid-item grid-item-1">1</div>
  <div class="grid-item grid-item-2">2</div>
  <div class="grid-item grid-item-3">3</div>
  <div class="grid-item grid-item-4">4</div>
  <div class="grid-item grid-item-5">5</div>
  <div class="grid-item grid-item-6">6</div>
  <div class="grid-item grid-item-7">7</div>
  <div class="grid-item grid-item-8">8</div>
  <div class="grid-item grid-item-9">9</div>
  <div class="grid-item grid-item-10">10</div>
  <div class="grid-item grid-item-11">11</div>
</div>

null

我目前正面临一个CSS网格行的问题；所需输出:3行第6个元素行高为其他元素行高的两倍获得的输出:3行等行高