Remove empty space in CSS Grid

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>