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

【问题标题】：How to make CSS Grid last row to take up remaining space如何使 CSS Grid 最后一行占用剩余空间
【发布时间】：2019-04-22 23:30:58
【问题描述】：

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

类似这样的：

有什么办法吗？

【问题讨论】：

标签： css css-grid

【解决方案1】：

您可以为此使用 flex。

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

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

参见下面的 sn-p：

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

【讨论】：

感谢您的精彩回答！我希望能够使用网格，但我真的认为这是不可能的。