Make grid item fill empty rows in grid container

Question

I am trying to achieve the result of the second grid code snippet, where the grid item on the left column fills the available rows.

• I can not alter the html structure (mobile-first) which is why I went for grid
• I do not know how many items will be on the right column (up to 100)

Is it possible without using the trick I did? The rows are already there, I'm not sure why I can't span it until it reaches the last one.

.grid {
  display:grid;
  background:lightgray;
  border:1px solid red;
  grid-template-columns: 3fr 1fr;
}
.grid-item {
  border:1px solid red;
  background:#fff;
}
.grid-item:nth-child(1) {
  grid-column: 1/-1;
}
.grid-item:nth-child(2) {
  height:125px;
}
.grid-item:nth-child(3) {
  height:50px;
}
.grid-item:nth-child(n+3) {
  grid-column: 2/-1;
}

/* second grid */
.grid-item--fix {
  grid-row:2/99;
}

<div class="grid">
  <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>

<hr>

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