空白源于1fr无高度可分：父容器未设height/min-height导致1fr=0px，auto行撑开后形成视觉空白；子项min-height或重置库继承值会压制stretch拉伸；gap延伸至边缘也易被误认为空白。
1fr 和 auto 混用时，空白来自高度分配逻辑断裂
写 grid-template-rows: auto 1fr auto 后底部或顶部出现大片空白，不是因为语法错，而是 1fr 没有可分的高度空间——它被卡在了 auto 行之间，而父容器整体高度未定义，导致 1fr 实际计算为 0px。
此时浏览器仍按三行渲染：第一行 auto（由内容撑开）、第二行 1fr = 0px、第三行 auto（又由内容撑开），中间那行“存在但不可见”，视觉上就成了上下两块内容之间的突兀空白。
- 打开开发者工具 → 选中 Grid 容器 → 查看「Computed」里的
height：如果是auto或远小于视口，说明高度链断了 - 临时加
min-height: 100vh到 Grid 容器上，如果空白立刻消失，就确认是高度上下文缺失 -
html和body必须同时设height: 100%或min-height: 100vh，漏掉任意一个，1fr就失去基准
子项自身尺寸会压制 1fr 的拉伸效果
1fr 只负责分配轨道高度，不强制子项填满。一旦子项写了 height、min-height 或继承了 min-height: 0（比如某些 CSS 重置库），align-items: stretch 就失效，子项不会拉伸，轨道空着，空白就露出来了。
- 检查子项的「Computed」面板里
min-height值：如果不是auto，大概率是它在锁死拉伸 - 临时加
min-height: unset或height: unset到子项上，看是否恢复填满 - 若需保底高度，改用
min-height: min-content或min-height: fit-content，它们与stretch不冲突
gap 会延伸到容器边缘，被误认为是 1fr 产生的空白
当最后一行子项数量不足列数时，gap 仍会在末尾子项右侧和底部照常渲染——尤其在 grid-auto-flow: row 下，容易让人以为是 1fr 多画了一行，实际只是间距溢出。
立即学习“前端免费学习笔记（深入）”；
- 给 Grid 容器加
outline: 1px solid red，对比 gap 边界和容器边界，能快速区分是真实空白还是 gap 延伸 - 想压缩这种视觉空白，可改用
grid-auto-fit配合minmax()，让无内容的隐式行真正收缩为0 - 避免对 Grid 容器设
padding，否则gap + padding叠加会放大边缘富余感
IE11 和旧 Safari 里 auto/1fr 混用会直接错乱
IE11 对 auto 和 fr 混用支持极差，auto 1fr 常被解析成两列都取 auto；Safari 10.1–15.6 虽识别 display: grid，但不支持 fr 在混合轨道中的计算逻辑，结果就是列宽崩塌、高度错位。
- 兼容旧浏览器必须拆开写：
-ms-grid-rows: auto 1fr auto+grid-template-rows: auto 1fr auto - 检测不能只用
@supports (display: grid)，要双条件：@supports (display: grid) and (grid-template-rows: 1fr) - 更稳妥的降级方案：用
height: 50vh替代1fr，或整个布局回退到 Flex
min-height: 0、还跑在 Safari 15.4 上的页面——三个条件叠在一起，1fr 会静默失效，连报错都没有。 
