css - 如何使 CSS Grid 最后一行占用剩余空间

Question

我有一个行数可变的网格，我希望最后一个为 1fr 高度。

像这样的东西：

有没有办法做到这一点？

Answer 1

您可以为此使用 flex 。

父容器应该有display: flex;. 我们想垂直使用它，所以我们将像这样改变 flex 方向flex-direction: column;。

在此之后，我们将为每个孩子使用该物业flex-shrink: 1;。这样，它将只占用所需/指定的空间。最后一个孩子的技巧是使用该属性flex-grow: 1;，以便占用可用空间。

请参阅下面的片段：

html, body {
  height: 100%;
}

.fill-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fill-height > div {
  border: 1px solid red;
  min-height:2em;
  flex-shrink: 1;
}

.fill-height > div:last-child {
  flex-grow: 1;
}

<section class="fill-height">
  <div>
    row 1 (shrink)
  </div>
  <div>
    row 2 (shrink)
  </div>
  <div>
    row 3 (grow)
  </div>
</section>

链接到JsFiddle