浏览器先按百分比分配固定空间，再将剩余空间按fr比例切分；例如30% 1fr 2fr在1000px容器中得300px、233.33px、466.67px。
百分比列 + fr 列时，浏览器怎么算宽度
浏览器先按百分比分配固定空间，再把剩余空间按 fr 比例切分。不是“统一换算后加权”，而是两步走：先扣掉所有百分比占的像素，再拿剩下的像素喂给 fr 单位。
-
grid-template-columns: 30% 1fr 2fr：假设容器宽 1000px，30% 先拿走 300px，剩下 700px 按 1:2 分给两个 fr 列 → 得到 233.33px 和 466.67px - 如果容器宽变小（比如 600px），30% 变成 180px，剩下 420px 再分 → fr 列等比缩放，但比例关系不变
- 百分比基于网格容器宽度，不是内容区或父元素；fr 完全不看内容，只吃“剩余可用空间”
minmax() 里混用 % 和 fr 会出什么问题
在 minmax(min, max) 中，如果 min 是百分比、max 是 fr（比如 minmax(20%, 1fr)），实际行为取决于内容撑开程度——它可能根本不会触发 fr 部分。
- 当内容很窄时，列宽取 20%，哪怕容器很宽，也不会自动拉伸到 “1fr 应得的份额”
- 只有内容宽度超过 20% 且容器有富余空间时，才会用 fr 规则向上扩展，上限是该 fr 在总剩余空间里的配额
- 更危险的是
minmax(1fr, 2fr)—— 这种写法无效，fr 不允许出现在min或max的单侧，浏览器会直接忽略整条轨道定义
flex-basis 和 grid-column-end 混用时，百分比和 fr 的优先级谁高
完全不冲突——flex-basis 属于 Flex 布局，grid-column-end 是 Grid 的定位属性，两者不在同一套计算体系里。真正容易混淆的是在 Grid 中误用 Flex 思维去理解 fr。
- Grid 里没有“主轴剩余空间再分配”这种 flex-flow 逻辑；fr 就是纯数学切分，不响应子项
width或min-width - 如果你给 Grid 子项设了
width: 50%，它只会尝试按 50% 容器宽渲染，但可能被所在轨道的 fr 或百分比规则强行截断 - 想让子项“尽可能占满轨道”，别设 width，改用
justify-self: stretch（默认就是）
IE 兼容性下用 % 和 fr 混合的现实代价
IE 完全不支持 fr 单位，所有含 fr 的声明会被整条丢弃，退回到浏览器默认行为（通常是 auto 或 100%）。这不是“部分失效”，而是语法级不识别。
立即学习“前端免费学习笔记（深入）”；
- 写
grid-template-columns: 20% 1fr，IE 会当没这行，走display: block流式回退（除非你写了 @supports 或 fallback 声明） - 用 PostCSS 插件如
postcss-grid-kiss或手动写双轨声明（如先写grid-template-columns: 20% 80%，再用 @supports 覆盖为 fr 版）能缓解，但增加维护成本 - 移动端 iOS Safari 从 10.3 开始支持 fr，但早期安卓 WebView（尤其 4.4）仍有 bug：百分比列在缩放或动态 resize 后不重算，fr 列卡死
混合单位本身没问题，但“百分比锚定视觉比例 + fr 保弹性”的预期，在 resize、字体加载、图片异步渲染这些真实场景中，很容易因为计算时机错位而露出马脚——比如一行文字刚换行，fr 列就突然跳动一次。
