fr单位计算不准的根源在于浏览器对可用空间的舍入误差及gap、box-sizing等规则的叠加影响，需统一box-sizing、合理使用minmax、避免混用单位并检查Computed面板数据一致性。
fr单位计算结果不准，列宽看起来不均等
fr单位本身没问题，问题出在浏览器对“可用空间”的实际测量上——它会先扣除所有固定尺寸（如gap、显式设置的border、padding），再把剩余像素按比例分给fr轨道。如果容器宽度是小数（比如799.5px），而你用了两个1fr，浏览器舍入后可能一列得399px，另一列得400px，肉眼就能看出偏差。
- 用开发者工具检查
grid-container的Computed width，确认是否真为整数； - 避免混用
px和fr：例如grid-template-columns: 200px 1fr 1fr，改用minmax(200px, 1fr) 1fr 1fr更可控； - 加
box-sizing: border-box到容器和所有子项，防止padding/border悄悄撑开尺寸； - 若必须固定侧边栏，写成
grid-template-columns: 200px minmax(0, 1fr)，minmax(0, 1fr)能防止内容撑大导致换行或溢出。
gap值没生效，或者网格项被意外挤窄
gap不是“额外留白”，而是直接参与轨道总宽计算的刚性占位。比如grid-template-columns: 1fr 1fr 1fr + gap: 10px，三列之间有2个gap，总共要从容器宽度里扣掉20px，再把剩下部分三等分。很多人忘了这点，以为gap只是视觉间隔。
- 检查父容器是否有
padding或border未被box-sizing: border-box覆盖，它们会进一步压缩可用空间； - 不要在子项上设
width或min-width，尤其别写width: 100%——它会强制占满轨道，无视gap预留； - 子项若含文字，记得加
min-width: 0和overflow: hidden，否则长单词或URL会撑裂轨道； - 用
display: grid的容器本身也受gap影响，但gap不作用于grid-row-gap和grid-column-gap以外的方向，别指望它控制上下外边距。
设置了box-sizing: border-box还是错位
只写* { box-sizing: border-box; }不够。伪元素::before和::after不继承这个声明，而很多UI库、图标、清浮动代码都依赖它们，一旦它们仍走content-box，就会偷偷多占空间，导致整体偏移。
- 必须写全：
*, *::before, *::after { box-sizing: border-box; }，且放在所有CSS最顶部； - 第三方组件（如React组件、Web Component）内部样式可能覆盖该规则，需在组件级单独加；
- 表单控件（
input、textarea）在Safari旧版中对box-sizing响应不稳定，可单独加padding: 0.375em; border: 1px solid;并禁用line-height干扰； - Shadow DOM或
iframe里的样式完全隔离，得在里面重复声明这套规则。
自适应列在小屏下不换行，反而横向滚动
这通常是因为auto-fit或auto-fill没配对minmax()使用，或者容器本身被外部限制了最小宽度。Grid的自适应逻辑只在“容器宽度变化”时触发，如果父层用了white-space: nowrap或flex-shrink: 0，它就根本收不进去。
- 正确写法只有这一种：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))； - 确保容器没有
min-width硬约束，或把它设为min-width: 0； - 检查父元素是否用了
display: flex且未设flex-wrap: wrap，Grid容器在里面会被当成单个flex item强行拉伸； - 移动端调试时，用
meta viewport确保缩放正常，否则1fr基于错误视口宽度计算。
真正容易被忽略的是：fr和gap的计算发生在布局阶段，而box-sizing影响的是每个子项的内容区大小——这两层规则不在同一时间点生效，但会互相咬合。调一个参数前，先看开发者工具里“Computed”面板中width、border-box width、grid track sizes三项是否一致。不一致，就说明某处盒模型或轨道定义正在悄悄覆盖预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
