当使用 grid-template-rows: 1fr 1fr 1fr 1fr 配合 gap 时，浏览器会强制分配等高行，导致内容（尤其图片）被压缩或容器整体溢出；改用 minmax(100px, 1fr) 可确保每行/列有最小高度/宽度保障，同时保持弹性伸缩，彻底解决响应式网格的垂直溢出问题。
当使用 `grid-template-rows: 1fr 1fr 1fr 1fr` 配合 `gap` 时，浏览器会强制分配等高行，导致内容（尤其图片）被压缩或容器整体溢出；改用 `minmax(100px, 1fr)` 可确保每行/列有最小高度/宽度保障，同时保持弹性伸缩，彻底解决响应式网格的垂直溢出问题。
CSS Grid 的 1fr 单位虽强大，但在固定行数 + 显式 gap 的组合下容易引发垂直溢出——尤其当子元素（如图片）具有固有宽高比、且容器未设置明确高度约束时。根本原因在于：grid-template-rows: 1fr 1fr 1fr 1fr 要求四行严格均分可用高度，而 gap: 2% 的百分比值又基于父容器高度计算，二者叠加会使总占用高度超过容器实际空间，迫使内容被挤压或溢出可视区域（如您截图中最后一行单元格高度异常缩小）。
✅ 正确解法是放弃「固定行数」思维，转而采用弹性但带底线的轨道定义：
.gridWrapper {
display: grid;
/* 每列最小 100px，最大均分剩余空间 */
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
/* 每行最小 100px（防图片塌陷），最大均分 —— 关键：不写死4行，让内容自然撑开 */
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)));
gap: 2%;
}
⚠️ 注意事项：
-
repeat(auto-fit, minmax(100px, 1fr)))比原方案更优：它能根据容器宽度自动调整行数（响应式本质），避免硬编码4fr导致小屏下强行拉伸； - 若必须保持 3×3 或 3×4 布局结构，可保留
grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);，但务必配合align-items: start防止子项默认拉伸（stretch是溢出帮凶）； - 图片需强化控制：
.mem > img { width: 100%; height: 100%; object-fit: cover; display: block; }，并为.mem添加height: 0; padding-bottom: 75%; position: relative;实现响应式宽高比容器（推荐用于卡片式布局）； - 移除
.gridContainer中的padding: 10% 5%（百分比 padding 基于宽度计算，易在窄屏引发高度失控），改用padding-block: 3rem; padding-inline: 1rem;。
总结：Grid 垂直溢出不是 bug，而是对 fr 单位机制的误用。minmax() 提供了可控的弹性边界，auto-fit / auto-fill 赋予真正的响应能力——让网格“按需生长”，而非“强行分割”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
