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

Question

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

类似这样的东西：

有什么办法吗？

Answer 1

您可以为此使用flex。

Te父容器应具有display: 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