结论：用height: 100vh搭配grid-template-rows: 60px 1fr 50px能稳定实现全屏布局，但需确保html、body{height:100%;margin:0}且容器无干扰fr的样式；因fr分配的是容器内剩余空间，非视口高度，若容器未真正占满屏幕或存在margin/padding/border，1fr即无法铺满。
直接说结论：用 height: 100vh 搭配 grid-template-rows: 60px 1fr 50px 这类结构能稳定实现全屏响应式布局，但前提是容器必须真正占满视口，且不能有干扰 fr 分配的样式。
为什么 1fr 在全屏布局里不铺满？
fr 单位分配的是“剩余空间”，不是“视口高度”。如果容器本身没撑满屏幕，或者父元素有 margin/padding/border，1fr 就只能分到被挤压后的那点空间。常见现象是：内容区只有一小段高，下方大片留白；或者滚动条出现后，1fr 突然变矮。
- 检查
html和body是否设置了margin: 0; height: 100% - 确保 grid 容器设了
height: 100vh（不是100%），且无max-height或min-height干扰 - 避免在容器上写
align-items: start或justify-content: start—— 它们会让轨道收缩
vh 和 fr 混用时，gap 怎么不截断背景？
加 gap 后，最后一行常被切掉——因为浏览器会在容器末尾硬留一个 gap 空隙。这不是 bug，是规范行为。尤其用 repeat(auto-fit, minmax()) 时更明显。
- 设
gap: 1rem的同时，给容器加margin: -0.5rem（即-gap/2） - 确认父级没有
overflow: hidden或border，否则负 margin 会被裁掉 - 别用
padding替代gap—— padding 不参与 fr 计算，但会挤占内容区宽度
响应式切换列数，为什么别直接改 grid-template-columns？
在媒体查询里反复重写整条 grid-template-columns: repeat(4, 1fr) → repeat(2, 1fr)，容易因设备宽度微调导致“多一列挤不进、少一列又留白”的卡顿感，resize 时还会触发 layout thrashing（重排抖动）。
- 优先用
repeat(auto-fit, minmax(280px, 1fr))，让浏览器自己数格子 - 需要语义化区域重排（比如移动端侧边栏移到顶部），就用
grid-template-areas配合媒体查询，而不是硬调列宽 - 如果必须写断点，
@media (max-width: 768px)内只改列数，别动gap或row-gap，避免连锁重算
IE11 或旧 Safari 下 fr 失效怎么办？
IE11 完全不识别 fr，遇到就整个 display: grid 声明失效；iOS 13 以下 Safari 对 minmax() 支持也不稳。
- 用
@supports (display: grid) and (grid-template-columns: 1fr)包裹现代布局，IE 自动跳过 - 降级方案首选 Flexbox：
display: flex; flex-wrap: wrap;+flex-basis: calc(33.333% - gap)，比 JS 计算更可靠 - 别用
fit-content(200px)当minmax()替代 —— 它在 Safari 中行为不一致，容易撑爆容器
真正难的不是写对那一行 grid-template-rows，而是搞清 fr 分配前的空间到底被谁吃掉了：是 body 的 margin？是滚动条宽度？还是某个祖先元素的 box-sizing: content-box？这些细节不排查干净，换再 fancy 的语法也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
