CSS Grid with dynamic heights for columns and growing rows not fully working

Question

Related partially to Remove empty space in CSS Grid, but with a few changes I am trying to achieve.

I basically want my rows and columns to be able to grow and shrink according to the amount of content there is. If you look at this example on CodePen you can see that the content of the blue div overflows into the pink footer. It should really push the footer down. Same applies if the red section had a lot content.

Also the top green section should too increase in height dynamically. And if there is no content, for example none in the green section, then it should have the red bottom section push up to fill in the empty space.

Anyone have an idea how to achieve this?

Here is a little snippet:

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    a <br/>
    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>
<div class="footer">Footer</div>

And the css so far:

.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;
}

.footer {
  width: 100%;
  height: 50px;
  background-color: pink;
}

Answer 1

Define the grid with 4 rows and put the footer inside the grid.

The header/footer can size according to their content while the bottom div explands to take up the remaining space.

Codepen Demo

.grid {
  display: grid;
  grid-template-columns: 645px 316px;
  grid-template-rows: min-content 1fr min-content min-content;
  grid-column-gap: 20px;
}

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

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

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

.footer {
  height: 50px;
  background-color: pink;
  grid-column: 1 /-1;
  grid-row: 4;
}

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">
    a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> 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 class="footer">Footer</div>
</div>

For the footer outside the grid - use 3 rows

.grid {
  display: grid;
  margin: auto;
  width: calc(645px + 316px + 20px);
  grid-template-columns: 645px 316px;
  grid-template-rows: min-content 1fr min-content;
  grid-column-gap: 20px;
}

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

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

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

.footer {
  height: 50px;
  background-color: pink;
  margin: auto;
  width: calc(645px + 316px + 20px);
}

<div class="grid">
  <div class="top">top<br/>top second line<br/></div>
  <div class="right">

  </div>
  <div class="bottom">
    bottom a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/> a <br/>
  </div>

</div>
<div class="footer">Footer</div>