fr单位按“扣完固定尺寸后的剩余空间”分配，百分比则基于容器总宽计算，二者混用时百分比优先、fr仅分剩余空间，且fr在无剩余空间或父容器宽度未定义时会失效。
fr 不是百分比，它分的是“扣完才剩的蛋糕”，而百分比算的是“整个蛋糕”——这是所有布局错乱的根源。
fr 单位怎么算：先扣固定尺寸，再分剩余空间
浏览器在解析 grid-template-columns 时，会严格按顺序执行两步：先扣除所有非弹性占用（比如 200px 列、gap、内容最小宽度），再把剩下的空间按 fr 份数切分。
例如：grid-template-columns: 200px 1fr 2fr：
- 容器总宽 1000px，
gap: 20px→ 先扣掉 20px，剩 980px - 再扣掉
200px固定列 → 剩 780px - 这 780px 按 1:2 分：1fr 得 260px，2fr 得 520px
而 25% 25% 25% 25% 是直接拿 1000px × 25% = 250px 每列，完全不考虑 gap 或内容撑开——结果总宽变成 1000px + gap，必然溢出。
混用 % 和 fr 时，顺序决定谁先“吃肉”
百分比列永远优先计算，fr 只能分剩下的全部空间，不会回退压缩前面的百分比列。
比如容器宽 900px：
-
grid-template-columns: 30% 1fr 1fr→ 第一列 270px，剩下 630px 平分，后两列各 315px -
grid-template-columns: 1fr 30% 1fr→ 还是先算中间 30% = 270px，剩下 630px 分给前后两个1fr，各 315px，中间列反而最窄
别写 50% 1fr 1fr 期待三等分——后两列加起来只占 50%，各自得 25% 容器宽，不是你直觉里的“各占一半剩余”。
百分比在 Grid 定位中根本无效
grid-column-start、grid-column 等定位属性只接受整数线号、命名线或 span，写 grid-column-start: 25% 属于无效值，会被浏览器忽略或触发解析警告。
常见误操作：
- 以为
grid-column: 1 / 50%能让元素跨到容器一半位置 → 实际无效 - 用 Sass 写
20% 30% 50%当列宽 → Sass 把%当作取模运算符，直接报错；必须用percentage(0.2)
想控制某列“始终占容器 20%”，只能用 20%，但要清楚它和 fr 不是同一套系统，混用必须明确谁主导、谁让位。
fr 失效的三个真实场景
fr 不是万能的，它依赖“有剩余空间可分”。以下情况它会退化：
- 父容器没设
width或max-width（比如display: inline-grid）→fr回退到min-content，列可能窄得看不见 - 所有列都是固定单位（如
200px 300px）→ 没剩余空间，fr完全不生效 - 嵌套 Grid 中子容器高度为
auto→1fr行高塌缩成内容高度，必须显式写height: 100%才能继承父高再算剩余空间
真正容易被忽略的是：fr 的“弹性”不是无条件的，它只在空间明确、约束清晰的前提下才可靠。一旦父级宽度由 fit-content 或 flex 压缩决定，% 会先失效，fr 则可能卡在最小内容宽上不动——这时候得靠 minmax(0, 1fr) 强制压缩，但旧 Safari 不支持 minmax(0, ...)，得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
