fr单位不参与盒模型计算，仅在grid轨道分配阶段起作用，自动扣除容器gap及固定尺寸后均分剩余空间；百分比则按父容器content-box宽度计算且无视gap，易导致溢出。
fr单位不是“更适合控制盒模型”，而是根本不参与盒模型计算——它只在Grid轨道分配阶段起作用，天然绕开padding、border、margin这些干扰项。
fr单位不读取盒模型尺寸，百分比会把padding算进100%
百分比值（如width: 50%）是按父容器的content-box宽度（含padding）计算的，一旦父容器有padding，50%就不是你预期的“一半内容区宽”。而fr只出现在grid-template-columns或grid-template-rows里，它压根不看子项的box-sizing、padding或border，只对Grid容器扣除固定尺寸和gap后的剩余空间做分配。
常见错误现象：grid-template-columns: 50% 50% + column-gap: 10px → 必然横向溢出；grid-template-columns: 1fr 1fr + 同样column-gap → 自动扣掉gap再均分，严丝合缝。
fr与gap天然协同，百分比完全无视gap存在
gap是Grid原生属性，fr在计算时自动把它从总宽中减掉；但百分比列宽声明里没有gap概念，写50% 50%时浏览器根本不知道还有10px间隙要留，结果就是两列各占50%容器宽，再加上gap，总宽超限。
-
grid-template-columns: 1fr 1fr→ 剩余空间 = 容器宽 − gap，再平分 -
grid-template-columns: 50% 50%→ 每列 = 容器宽 × 0.5，gap额外加在中间 - 小屏下
%布局极易触发overflow-x: scroll，fr基本不会
fr能和minmax()配合约束最小内容尺寸，百分比做不到
百分比无法响应内容实际宽度——长URL、大图、未设min-width: 0的文本都会撑爆%列；fr虽也受内容影响，但配合minmax()就能守住底线：
例如grid-template-columns: 200px minmax(300px, 1fr) 1fr：第二列至少300px，超出部分才参与剩余空间分配；第三列纯弹性。而grid-template-columns: 200px 30% 1fr这种混用，浏览器先算30%，再把剩下70%分给1fr，逻辑断裂且不可预测。
fr失效的三个真实原因，常被误认为“盒模型问题”
很多人调了半天padding和box-sizing，其实fr没生效跟盒模型无关：
- 父容器没设
display: grid或display: inline-grid - 在子项上写了
width: 1fr——fr只能用在容器的grid-template-*属性里 - 子项设置了
min-width或内容本身过宽，导致该轨道无法压缩到fr计算值（此时浏览器优先保内容，fr退为“至少占这么多”）
真正要盯住的，从来不是padding怎么写，而是grid-template-columns声明是否干净、子项是否越权干预轨道分配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
