grid-auto-rows: 1fr 本身不产生空白，而是因父容器高度缺失导致浏览器将每行高度计算为0px；需确保html、body及所有祖先容器有明确高度约束，否则1fr退化为auto，空内容行高度为0。
grid-auto-rows: 1fr 本身不产生空白，是父容器高度缺失导致的“视觉空白”
写 grid-auto-rows: 1fr 后看到顶部或底部大片空白，不是它加了空白，而是浏览器把每行高度算成了 0px —— 因为 1fr 没有可分配的空间。它需要父容器有明确高度（比如 min-height: 100vh），否则就退化为 auto，而空内容行的 auto 高度就是 0。
常见验证方式：打开开发者工具，选中 Grid 容器，在「Computed」面板里看 height 是不是具体像素值；如果是 auto，说明整条高度链断了（html → body → 父容器 → Grid 容器）。
- 临时加
min-height: 300px到 Grid 容器上，如果空白立刻消失，就坐实是高度上下文问题 - 不要只给 Grid 容器设
height: 100%，必须确保它的所有祖先（尤其是html和body）也有高度约束 - 若 Grid 在 Flex 容器内，父级需设
flex: 1，Grid 容器再加height: 100%+min-height: 0，否则 Flex 的拉伸逻辑会干扰 Grid 的高度计算
子项自身尺寸声明会覆盖 grid-auto-rows 的拉伸效果
grid-auto-rows: 1fr 只负责定义“隐式行”的默认高度，但子项是否真正填满这行，取决于 align-items: stretch 是否生效。而这个默认行为会被子项自己的块轴尺寸声明直接压制。
例如子项写了 height: 200px、min-height: 100px 或继承了 min-height: 0（某些 CSS 重置库会这么干），那它就不会被拉伸，结果就是行高按 1fr 分配了，但内容没占满，下方露出空白。
- 用开发者工具检查子项的
min-height计算值，如果不是auto，就可能是罪魁祸首 - 临时加
min-height: unset或height: unset测试是否恢复拉伸 - 若需保底高度，改用
min-height: min-content或min-height: fit-content，它们与stretch不冲突
gap 值被误认为“空白”，实际是间距延伸到容器边缘
当最后一行子项数量不足列数时，gap 仍会照常渲染在末尾子项右侧和底部——尤其在 grid-auto-flow: row 下，容易让人误以为是 grid-auto-rows 多画了一行空白。
这不是 bug，是规范行为：gap 是网格项之间的间距，不区分“是否有后续项”。它不会生成新轨道，但视觉上可能形成右侧/底部的“富余空间”。
- 用
outline: 1px solid red包裹 Grid 容器，对比gap边界和容器边界，能快速区分是真实空白还是 gap 延伸 - 想压缩这种视觉空白，可改用
grid-auto-fit配合minmax()，让无内容的隐式行高度真正收缩为0 - 避免对 Grid 容器设
padding，否则 gap + padding 会叠加放大“空白感”
grid-auto-rows: 1fr 和 grid-template-rows 混用时的隐式行陷阱
如果你同时写了 grid-template-rows: 60px 1fr 和 grid-auto-rows: 1fr，那只有超出前两行的**额外子项**才会进入隐式行，并受 grid-auto-rows 控制。此时若这些隐式行内容为空或极简，1fr 依然因无高度上下文而坍缩，形成底部空白。
更隐蔽的问题是：显式行（grid-template-rows）和隐式行（grid-auto-rows）的高度计算逻辑独立。前者依赖父容器总高，后者只管新增行——两者不联动。
- 检查 DOM 中是否真有超出显式行数的子元素；没有的话，
grid-auto-rows根本不触发 - 若只是想让所有行（含动态新增）等高，直接用
grid-template-rows: repeat(auto-fill, 1fr)更可靠 - 避免在同一个容器里既用固定
grid-template-rows又依赖grid-auto-rows做主布局，语义易混淆，调试成本高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
