Html 具有动态高度的CSS网格，用于列和不断增长的行，但未完全工作

部分涉及，但有一些变化，我试图实现

我基本上希望我的行和列能够根据内容的数量增长和收缩。如果你看这个，你可以看到蓝色div的内容溢出到粉红色的页脚中。它真的应该把页脚往下推。如果红色部分有很多内容，同样适用

此外，顶部绿色部分的高度也应动态增加。如果没有内容，例如绿色部分没有内容，那么应该将红色底部部分向上推以填充空白

有人知道如何做到这一点吗

下面是一个小片段：

<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>

---

用4行定义网格，并将

页脚

放在网格内

页眉/页脚可以根据其内容调整大小，而

bottom

div将解释以占用剩余空间

.grid{
显示：网格；
网格模板列：645px 316px；
网格模板行：最小内容1fr最小内容最小内容；
栅柱间隙：20px；
}
.顶{
网格柱：1/2；
背景颜色：绿色；
}
.对{
网格柱：2；
网格行：1/4跨；
背景颜色：蓝色；
}
.底部{
网格柱：1；
背景色：红色；
}
.页脚{
高度：50px；
背景颜色：粉红色；
网格柱：1/-1；
网格行：4；
}

顶部
顶部第二行

a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

底部
页脚

页脚无法进入网格，它超出了“我的页面”的构建范围

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