fr单位更优因其分配扣除固定尺寸、gap和内容最小宽度后的剩余空间，而非容器总宽；%直接按总宽计算易溢出，fr则先扣后分，结合minmax()与repeat(auto-fit)可实现健壮响应式。
fr 单位在响应式设计中更好用，不是因为它“更现代”，而是它分配的是扣除固定尺寸、gap、内容最小宽度后的剩余空间——这个机制天然适配变化的视口和不可控的内容。
fr 分配的是“减完才剩的蛋糕”，不是“整个蛋糕”
百分比（%）按容器总宽直接算，不管后面有没有 gap、有没有固定列、内容会不会撑开；fr 则先扣掉所有已知占用，再分剩下的。
-
grid-template-columns: 50% 50%→ 每列都按父宽 50% 算，加上column-gap: 20px就必然溢出 -
grid-template-columns: 1fr 1fr→ 先扣掉 20px gap，剩下空间平分，不溢出 - 含长 URL 的网格项没设
min-width: 0时，%列会被撑爆，1fr列会自动压缩（前提是父容器高度/宽度约束有效）
混用 % 和 fr 时，顺序决定谁先“吃肉”
浏览器逐个解析轨道尺寸，% 列先按容器总宽锁定像素值，剩下的空间才交给 fr 分——fr 不会回退去压窄前面的 % 列。
-
grid-template-columns: 30% 1fr 1fr→ 第一列占 30%，后两列平分剩下 70% -
grid-template-columns: 1fr 30% 1fr→ 还是先算中间 30%，前后两个1fr分剩下的 70%，中间反而最宽 - 想让
%列可被挤压？得用minmax(0, 30%)，但旧版 Safari 对此支持不稳定
真正健壮的响应式列数控制，靠 repeat(auto-fit, minmax())，不是纯 1fr
纯 1fr 1fr 1fr 在小屏上会把卡片压成细条；纯 % 又难保最小宽度。组合才是关键。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))→ 每列至少 300px，空余由1fr吞掉；屏幕缩小时自动减少列数 -
auto-fit合并空轨道，auto-fill保留空位——响应式几乎都该选auto-fit -
minmax(250px, 1fr)中的250px是硬性底线，比minmax(30%, 1fr)更安全，后者在窄屏下可能直接超容器宽
fr 失效的三个硬前提，90% 的问题卡在这儿
写对地方比调参数重要得多。fr 只在 Grid 上下文中起作用，且依赖明确的可用空间。
- 父容器没设
display: grid或display: inline-grid→ fr 完全被忽略 - 网格容器本身没占满父级（比如被
width: fit-content卡住，或祖先元素没设height）→1fr在grid-template-rows里就失效 - 子项有长单词/URL 且没设
min-width: 0→ 默认min-width: auto强制列宽 ≥ 最长子项，fr 分配结果被覆盖
fr 的强大不在语法简洁，而在它把“剩余空间”这个模糊概念变成了可预测、可组合、可降级的计算路径。容易被忽略的是：它不跨层生效，不兼容 IE11，也不能和 calc() 混写在同一轨道声明里——这些限制恰恰定义了它的适用边界。
