如何阻止CSS Grid隐式行拉伸占满min-height容器高度且保留页脚位置

问题根因 #

该现象是CSS Grid的默认布局规则导致的：
Grid容器的align-content属性默认值为stretch，当容器设置了明确的min-height: 80vh，且内部所有网格行的总高度小于容器高度时，浏览器会自动拉伸所有隐式生成的网格行，填充满容器的剩余高度，就出现了你看到的子元素被拉长的效果。

解决方案 #

仅需给Grid容器新增一行样式配置即可，无需修改其他代码：

main.chapter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #999;
  min-height: 80vh;
  /* 新增以下属性 */
  align-content: start;
}

方案验证 #

• 所有网格子元素会保持自身内容的自然高度，不会被拉伸
• 容器的80vh最小高度规则仍然生效，页脚位置不会发生变化
• 完全兼容现有HTML结构，不需要调整子元素的样式规则

内容的提问来源于stack exchange，提问作者breadwild