fr单位失效根本原因是父容器缺乏宽度或高度上下文，而非Grid语法错误；1fr按父容器可用空间份数分配，若父容器width为auto或无明确height，则无剩余空间可分，导致列宽趋零或行高塌陷。
fr单位失效是因为父容器没宽度，不是Grid写错了
1fr 不是“占一半”，而是“把父容器当前的可用宽度按份数分”。如果父容器 width 是 auto（比如 div 默认行为），它就只撑开到内容宽度，根本没“剩余空间”可分——此时 grid-template-columns: 1fr 1fr 看起来像单列，其实是两列都挤在极窄宽度里，甚至被压缩到 0px。
常见现象包括：网格项堆成一竖条、开发者工具里 Computed 的 grid-template-columns 值正常但列宽几乎为 0、加了 border 后发现容器本身窄得离谱。
- 检查父容器 Computed 面板里的
width和inline-size，不是看 Styles 里写了什么，要看实际值是不是auto或远小于预期 - 临时加
width: 100%或min-width: 0（对 flex 子项尤其关键）立刻验证是否是宽度缺失问题 - 若父容器是 Flex 项目，确保它有
flex: 1、width: 100%或min-width: 0——否则默认min-width: auto会阻止它收缩，进而卡死 Grid 容器的宽度来源 - 避免只靠
max-width：它不提供计算 fr 的基准，必须搭配width: 100%或显式width
子项含长文本或内联元素时，fr 被撑开 ≠ 失效，是 min-width 在作祟
即使父容器宽度正常，1fr 列也可能严重不等宽——这不是 fr 失效，而是子项默认 min-width: auto 强制列宽 ≥ 内容最小宽度（min-content）。一个未换行的 URL 或长单词就能把整列顶宽，其他列被迫压缩。
典型表现：Computed 面板里列宽差异极大，min-width 实际值是 auto 而非 0；加了 white-space: nowrap 后问题加剧。
- 给 Grid 子项加
min-width: 0（注意选择器要精准，如.grid > .item，避免污染全局） - 搭配
overflow: hidden和text-overflow: ellipsis才能让文本真正截断 - 若子项内部还有 Flex/Grid，它们也需同样设
min-width: 0，否则撑开会逐层传递 - 更彻底的写法是在
grid-template-columns里直接用minmax(0, 1fr)，从轨道定义层切断内容撑开路径
嵌套在 Flex 容器里时，fr 行高失效的核心是缺高度上下文
把 grid-template-rows: 1fr 2fr 放进 Flex 容器后，第二行内容挤成一条线？大概率不是 Grid 写错，而是 Flex 父容器没给 Grid 子项分配明确高度——align-items: stretch 失效的前提是父容器自身有交叉轴尺寸（比如 Flex 方向为 row 时，要有 height 或 min-height）。
Computed 面板里 height 显示 0px 或远小于预期，就是最直接证据。
- Flex 父容器必须有明确高度约束，例如
min-height: 300px或height: 100vh - Grid 容器自身需有块级尺寸基础：加
height: 100%、flex: 1或min-height: 0（对 Flex 子项防高度塌陷） - 别只依赖
1fr：至少设一个固定轨道（如150px 1fr），或改用minmax(0, 1fr)提高鲁棒性 - 检查是否误用了
display: grid覆盖了原本的display: flex，Computed 面板里display值才是最终生效值
旧浏览器里 fr 直接被忽略，不是精度问题而是语法不识别
IE11 和 Safari 9–10.1 根本不解析 1fr，整条 grid-template-columns 声明静默丢弃，回退到单列流。这不是“算不准”，是语法层面的不支持——@supports (grid-template-columns: 1fr) 在 IE11 返回 false 就是铁证。
开发者工具里 grid-template-columns 显示为空字符串，就是典型信号。
- 不要指望 autoprefixer：v9+ 已移除对 IE Grid 的支持，
grid: true对fr无效 - 降级方案优先选 Flex：比百分比 Grid 更稳，尤其涉及响应式或动态内容时
- 若坚持用百分比，必须满足：父容器有明确
width，百分比总和严格等于 100%，且避开混用%和px - IE11 必须用
-ms-grid-columns+-ms-grid-column手动定位，此时1fr语义与现代标准不同，慎用
fr 单位本身很可靠，失效几乎都源于外部约束缺失：宽度没来源、高度没上下文、内容没压缩、浏览器不识语法。真正要调的从来不是 1fr 本身，而是它所依赖的那层容器尺寸和子项行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
