如何设置CSS Grid行随内容增长且不超过指定最大值？

可以通过两种简洁的方式实现你要的效果：

方法一：用minmax()直接定义行尺寸 #

在grid-template-rows中使用minmax(min-content, 80vh)，这个函数会让行高度优先适配内容（min-content），但最大高度被限制在80vh，完全匹配你的需求：

.grid-container {
  display: grid;
  grid-template-rows: minmax(min-content, 80vh);
}

方法二：结合auto与max-height约束 #

如果需要处理内容溢出的场景，可以先将行高设为auto（随内容自动增长），再给网格项添加max-height和滚动属性，保证布局稳定：

.grid-container {
  display: grid;
  grid-template-rows: auto;
}

.grid-item {
  max-height: 80vh;
  overflow-y: auto; /* 内容超过最大高度时显示垂直滚动条 */
}

两种方法的区别： #

• 方法一代码更简洁，适合不需要处理溢出内容的场景，内容超出时会直接截断（或根据容器的overflow属性处理）。
• 方法二更适合需要完整展示内容的场景，通过滚动条避免内容丢失。

内容的提问来源于stack exchange，提问作者André Mendes