常见高度塌陷原因是父容器未设高度，1fr无参照基准；需加min-height（如100vh），并注意box-sizing、滚动条及ie11不支持fr单位。
grid-template-rows设成1fr却出现高度塌陷
常见现象是：明明写了 grid-template-rows: 1fr 1fr，但第二行内容挤成一条线、甚至看不见。根本原因是父容器没设置明确高度，1fr 没有参照基准，浏览器按“内容最小高度”渲染，结果就是“看起来错位”。
- 必须给网格容器加
height或min-height（比如min-height: 100vh），否则1fr无效 - 如果子项本身含不定高内容（如图片、富文本），建议同时设
align-items: stretch（默认值，但显式写上更稳妥） - 避免用
height: auto或未设高度的 flex 容器嵌套 grid 容器——父级高度不可知，子级1fr就会失效
grid-template-rows中px和fr混用导致比例失真
比如 grid-template-rows: 60px 1fr 2fr，本意是头部固定60px、剩余空间按1:2分配，但实际第二行可能比第三行还高——因为 1fr 和 2fr 分的是“减去60px后的剩余空间”，而这个剩余空间受 padding、border、滚动条等影响，容易被低估。
- 检查容器是否设置了
box-sizing: border-box（推荐全局启用，避免 padding 溢出干扰计算） - 如果存在横向滚动条，它会占用容器宽度，间接压缩可用高度，导致 fr 计算偏小；可加
overflow: hidden临时验证 - 调试时用浏览器开发者工具选中网格容器，看 computed height 是否符合预期，再反推
grid-template-rows是否被截断或重算
Grid项错位其实是gap撑开的视觉误差
很多人以为错位是行列没对齐，其实是 gap 值过大或单位不一致（比如 gap: 2rem 在字体缩放后变大），让相邻项间距失衡，产生“偏移”错觉。
-
gap是作用于网格轨道之间的，不是项内部；它不会影响grid-template-rows的数值计算，但会显著改变视觉节奏 - 避免在响应式中只改
font-size却忘了同步调整gap（尤其用了rem或em） - 若需精确控制项高度，优先用
grid-template-rows定义轨道，而非依赖gap+ 项自身height组合
IE11下grid-template-rows完全不生效
IE11 对 grid-template-rows 支持极弱：不识别 fr 单位，minmax()、repeat() 全部忽略，只认像素/百分比/固定关键词（如 auto）。
- 如需兼容 IE11，必须降级为
grid-template-rows: 60px 200px 300px这类纯固定值写法 - 不能指望
1fr在 IE 中“自动适配”，它会被整个声明丢弃，回退到浏览器默认（通常是单行堆叠） - 用 @supports 检测时注意：
@supports (display: grid) and (grid-template-rows: 1fr)在 IE11 中为 false，但仅@supports (display: grid)会返回 true——这是个经典陷阱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
