不確定我正在嘗試實現的東西是否可能使用css grid，但我目前的實現不工作。下面是我試圖實現的布局。紅色方框橫跨兩行。

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

正如評論中所說，你不需要跨越2行，你需要跨越2列。您還需要將該類應用于第一個元素:。寬{ grid-column:span 2；}

在你的圖片中，你也有一個6列的網格，而不是5列的

.grid {
  display: grid;
  grid-template-columns: repeat(6, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.wide {
  grid-column: span 2;
}


/* for styling purpose only */
.grid > div:nth-child(n+1) {
  background-color: grey;
}

.grid > div:nth-child(1) {
  background-color: brown;
}

<div class="grid">
  <div class="wide"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 2;
  grid-column: 1 /3;
  background-color: re
}

.block {
  background-color: blue;
}

<div id="wrapper">
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

下面產生的正是你想要的。

<div id="wrapper">
    <div class="block" style="grid-column: 1/3;"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

在CSS中，我刪除了。wide和. block. #包裝保持不變。

不確定我想達到的目標是否有可能使用css網格

使用CSS網格一切皆有可能

以下Html和Css需要網格跨度選項:

<div class="grid">
   <div class="col-span"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

你需要的Css是:

.grid {
      display: grid;
      grid-template-columns: repeat(4, 50px);
      grid-auto-rows: 50px;
      grid-gap: 5px;
  }

  .col-span {
      grid-column: span 2;
  }

  .grid > div {
       background-color: #fcfcfc;
  }

  .grid .col-span {
       background-color: gray;
   }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.col-span {
  grid-column: span 2;
}

.grid > div {
  background-color: #e9e0e0;
}

.grid .col-span {
  background-color: gray;
}

<div class="grid">
  <div class="col-span"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>