Eliminar espacio vacío en CSS Grid

Tengo el siguiente diseño:

.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; } 
 
top
a
a
a
a
a
a
a
a
a
a
bottom

¿Cómo podría hacer exactamente lo mismo usando una grilla, pero la cantidad de espacio que ocupa la sección superior verde es solo una línea. es decir, la sección roja inferior debe presionar hacia arriba hasta debajo de la palabra “arriba” para que se elimine el espacio vacío adicional en la sección verde superior

Cree una grilla con, digamos, 25 filas pequeñas. Algo como esto:

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

Haga que el elemento “superior” (verde) abarque cuatro filas.

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

Haga que el elemento “inferior” (rojo) abarque las filas restantes.

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

(Comenzando en la fila 6 para dejar espacio para la brecha de 20px que tenía originalmente).

Haga que el elemento “correcto” (azul) abarque todas las filas.

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

codepen revisado

 .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; } 
 
top
a
a
a
a
a
a
a
a
a
a
bottom