CSS 具有动态高度的列和不断增长的行的网格无法完全正常工作

Question

部分与 Remove empty space in CSS Grid 相关，但我正在尝试进行一些更改。

我基本上希望我的行和列能够根据内容量增长和收缩。如果您查看此 example on CodePen，您会发现蓝色 div 的内容溢出到粉红色的页脚中。它真的应该将页脚向下推。如果红色部分内容很多，同样适用。

顶部绿色部分的高度也应动态增加。如果没有内容，例如绿色部分的none，那么它应该让红色底部的部分上推以填充空的space。

有人知道如何实现吗？

这是一个小片段：

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

到目前为止css：

.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

用 4 行 定义网格，并将 footer 放在网格内。

header/footer可以根据自己的内容来调整大小，而bottomdiv则展开占用剩余的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>

对于网格外的页脚 - 使用 3 行

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

CSS 具有动态高度的列和不断增长的行的网格无法完全正常工作

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

html

css

css-grid