Remove empty space in CSS Grid

Question

I have the following layout:

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / span 2;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 2;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br>
  </div>
  <div class="bottom">
    bottom
  </div>
</div>

How could i do the exact same using a grid but the amount of space that the green top section takes up is just one line. i.e. the bottom red section should push right up to below the word "top" so that the extra empty space in the top green section is removed

Answer 1

Create a grid with, let's say, 25 small rows. Something like this:

grid-template-rows: repeat(25, 10px);

Make the "top" (green) item span four rows.

.top {
    grid-row: 1 / 4;
}

Make the "bottom" (red) item span the remaining rows.

.bottom {
    grid-row: 6 / -1;
}

(Starting at row 6 to make space for the 20px row gap you had originally.)

Make the "right" (blue) item span all rows.

.right {
    grid-row: 1 / -1;
}

revised codepen

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: repeat(25, 10px);
  grid-column-gap: 20px;
}

.top {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: green;
}

.right {
  grid-column: 2;
  grid-row: 1 / -1;
  background-color: blue;
}

.bottom {
  grid-column: 1;
  grid-row: 6 / -1;
  background-color: red;
}

<div class="grid">
  <div class="top">top</div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>
  <div class="bottom">bottom</div>
</div>