如何让行数未知的Grid容器最后一行占满剩余高度？

需求说明 #

需要创建一个行数未知的单列Grid容器，除最后一行外，其余行高度适配自身内容；最后一行无论内容多少，都占据容器剩余高度。

你的原始代码 #

HTML

<div class="grid-container">
  <div class="item">some data 1 </div>
  <div class="item">some data 2</div>
  <div class="item">some data 3</div>
  <div class="item">some data 4</div>
  <div class="last-item">last one</div>
</div>

你尝试的CSS（无效部分已标注）

.grid-container {
  display: grid;
  /* 此处repeat(auto-fill, min-content) 1fr无效，auto-fill/auto-fit不适合用于行维度的动态重复 */
  grid-template-rows: repeat(auto-fill, min-content) 1fr;
  height: 500px;
}
.item {
 height: max-content;
}

方案一：修改HTML结构的纯CSS方案（推荐） #

通过将前n-1个项放入一个子Grid容器，主Grid容器分为两行：第一行高度自适应子容器内容，第二行占剩余高度。

修改后的HTML

<div class="grid-container">
  <div class="items-group">
    <div class="item">some data 1 </div>
    <div class="item">some data 2</div>
    <div class="item">some data 3</div>
    <div class="item">some data 4</div>
  </div>
  <div class="last-item">last one</div>
</div>

对应CSS

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自适应内容，第二行占剩余高度 */
  height: 500px;
  gap: 8px; /* 可选，设置行间距 */
}

.items-group {
  display: grid;
  grid-auto-rows: min-content; /* 子容器内每行高度适配内容 */
  gap: 8px; /* 可选，设置子项间距 */
}

.item {
  background: #f0f0f0; /* 示例背景色 */
}

.last-item {
  background: #e0e0e0; /* 示例背景色 */
}

方案二：不修改HTML的JS辅助方案 #

如果无法调整HTML结构，可以通过JS动态计算前n-1个项的数量，设置grid-template-rows属性：

CSS基础样式

.grid-container {
  display: grid;
  height: 500px;
  gap: 8px;
}

.item, .last-item {
  background: #f0f0f0;
}

.last-item {
  background: #e0e0e0;
}

JS代码

const gridContainer = document.querySelector('.grid-container');
const itemCount = document.querySelectorAll('.item').length;
// 生成前n个auto行，最后一行1fr
gridContainer.style.gridTemplateRows = `repeat(${itemCount}, auto) 1fr`;

效果展示 #

内容的提问来源于stack exchange，提问作者Георгий Барсегян