fr单位分配宽度不符合预期的根本原因是它严格按规范分配“剩余空间”，而父容器无明确宽、子项内容撑开、gap和box-sizing等会压缩可用空间，需检查computed值并设min-width: 0或minmax(0,1fr)。
fr单位分配宽度不符合预期，根本不是fr“算错了”，而是它严格按规范在分“剩余空间”——而你看到的容器宽度、子项内容、父级约束，往往和你以为的“可用空间”不一致。
父容器没宽度，fr就无空间可分
fr单位必须基于一个有明确宽度（或高度）的上下文才能计算。如果父容器width是auto（比如普通div在文档流中），它只会收缩到内容宽度，导致“剩余空间”趋近于零。
- 现象：两列
1fr 1fr堆成竖条，开发者工具里Computed面板显示grid-template-columns正常，但每列inline-size只有几像素 - 验证方法：选中Grid容器，在
Computed里看width值是不是auto或远小于预期 - 临时修复：
width: 100%或min-width: 0（尤其当Grid容器是Flex子项时） - 深层原因：Flex项目默认
min-width: auto会阻止收缩，从而卡死Grid容器的宽度来源
子项内容撑开轨道，min-content在作祟
即使父容器宽度正常，1fr列也可能严重不等宽——这不是fr失效，而是子项默认min-width: auto强制轨道宽度 ≥ 内容最小宽度（min-content）。一个未换行的URL或长单词就能把整列顶宽。
- 现象：
Computed里列宽差异极大，min-width显示为auto而非0；加了white-space: nowrap后更糟 - 直接解法：给Grid直接子项加
min-width: 0（注意选择器精准，如.grid > .item） - 更彻底的写法：
grid-template-columns: repeat(2, minmax(0, 1fr))，从轨道定义层切断内容撑开路径 - 若子项内部还有Flex/Grid，它们也需同样设
min-width: 0，否则撑开会逐层传递
gap和box-sizing悄悄吃掉可用空间
gap不是视觉留白，而是刚性占位：它会直接从容器总宽中扣除。比如grid-template-columns: 1fr 1fr 1fr + gap: 10px，三列之间有2个gap，共扣20px，再把剩下部分三等分。
- 常见误判：以为
gap只是间隙，结果发现列宽比预期窄了 - 检查点：父容器是否有未被
box-sizing: border-box覆盖的padding或border，它们会进一步压缩可用空间 - 风险操作：在子项上设
width: 100%——它会强制占满轨道，无视gap预留，极易引发溢出 - 推荐统一加：
box-sizing: border-box到Grid容器和所有子项
混用单位引发隐式舍入与比例失衡
混用px和fr（如200px 1fr 1fr）本身合法，但会让浏览器先扣固定值再分剩余空间。若容器宽度含小数像素（如799.5px），舍入后可能一列得299px，另一列得300px，肉眼可见偏差。
- 避免裸写
200px 1fr 1fr，改用200px minmax(0, 1fr) minmax(0, 1fr) - 别手动把
1fr 1fr替换成50% 50%——百分比受sub-pixel累积误差影响，且不响应内容变化 - 真正需要固定比例侧边栏时，用
calc()：grid-template-columns: 25% calc((100% - 25%) / 2) calc((100% - 25%) / 2) - 嵌套Grid时，外层
fr不会传导给内层；内层必须重新定义自己的空间分配逻辑
最常被忽略的一点是：fr的行为完全取决于「谁在分空间」和「空间到底剩多少」。它不关心你的视觉预期，只忠实地执行计算流程。调试时优先查Computed里的width、min-width、gap实际值，而不是盯着Styles面板里写的那行CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
