fr单位按剩余空间分配，百分比按容器总宽计算，混用时顺序决定计算优先级；fr失效于父容器无宽、全固定列、嵌套中height:auto等场景。
fr单位只分“扣完才剩的蛋糕”，百分比算的是“整个蛋糕”
这是所有错乱的根源。浏览器解析 grid-template-columns 时，先扣除所有非弹性占用：固定宽度（如 200px）、gap、子项最小内容宽（min-content），再把剩下的空间按 fr 份数切分。而 25% 是直接拿容器总宽 × 0.25，完全不感知 gap 或其他列是否撑开。
常见错误现象：
-
grid-template-columns: 200px 25% 25%→ 总宽超容器，触发横向滚动条 -
grid-template-columns: 200px 1fr→ 第二列吃掉全部剩余空间，无需手动算百分比
混用 % 和 fr 时，顺序决定谁先“吃肉”
百分比列永远优先计算，fr 只能分它吃完后剩下的全部空间，不会回退压缩前面的列。
例如容器宽 900px：
-
grid-template-columns: 30% 1fr 1fr→ 第一列270px，剩下630px平分，后两列各315px -
grid-template-columns: 1fr 30% 1fr→ 还是先算中间30%=270px，剩下630px分给前后两个1fr，各315px，中间列反而最窄
想让布局可预测，% 尽量放在开头或结尾，别插在中间。
fr 失效的三个真实场景，不是写错了，是条件没满足
fr 不是万能胶，它只在“有明确剩余空间可分”时才生效。以下情况它会退化：
- 父容器没设
width或max-width（比如display: inline-grid）→fr回退到min-content，列可能窄得看不见 - 所有列都是固定单位（如
200px 300px）→ 没剩余空间，fr完全不参与计算 - 嵌套 Grid 中子容器
height: auto→1fr行高塌缩成内容高度，必须显式写height: 100%才能继承父高再算剩余空间
fr 和 minmax() 搭配才是响应式稳态组合
纯 1fr 容易被长单词、URL 或图片撑爆，需要加约束：
-
grid-template-columns: 300px minmax(300px, 1fr)→ 主区至少300px，最多吃满剩余空间 -
grid-template-rows: auto 1fr→ 顶部自适应，主区占满剩余高度（常用于侧边栏+主内容） - 给网格项加
min-width: 0或overflow: hidden，防止默认min-width: auto阻断fr压缩
真正容易被忽略的是：fr 的弹性不是无条件的——它依赖容器尺寸明确、约束清晰、上下文干净。写错位置（比如写在子项上而不是网格容器的 grid-template-columns），再怎么调参数也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
