混用 % 和 fr 时，百分比列先按容器宽度计算，fr 列再平分剩余空间；顺序影响布局，如 50% 1fr 1fr 中后两列各得剩余空间的 1/2，而非容器的 25%。
grid-template-columns 里混用 % 和 fr 会怎样
百分比和 fr 单位在同一个 grid-template-columns 声明中可以共存，但它们的计算逻辑完全不同：百分比基于网格容器的总宽度，而 fr 基于剩余可用空间（即总宽减去所有固定/百分比列占去的宽度）。这意味着顺序和比例关系直接影响最终布局。
常见错误是以为 50% 1fr 1fr 会让后两列均分剩下 50% 宽度——实际并非如此。浏览器先按 50% 分配第一列，再把**剩余全部空间**（不是“剩下 50%”）交给两个 fr 单元平分。
- 如果容器宽 1000px，
50%列占 500px，剩余 500px → 两个1fr各得 250px - 但如果写成
1fr 50% 1fr，浏览器仍先算50%（500px），再把剩下 500px 分给前后两个1fr→ 各 250px，中间列反而最宽 -
fr不会“回退”去重新缩放百分比列；它只对明确留出的空白空间起作用
什么时候该用 % + fr 而不是全用 fr
需要某列严格响应容器宽度（比如侧边栏始终占 20%）、其余列弹性填充时，混用才有意义。纯 fr 无法实现“固定比例基准 + 弹性延展”的混合行为。
典型场景：左侧导航栏固定占容器 25%，主内容区自适应，右侧工具栏最小宽度 300px 且不压缩。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: 25% 1fr minmax(300px, 2fr);
这里 25% 锁定左侧比例，1fr 吃掉中间所有剩余空间，minmax(300px, 2fr) 确保右侧至少 300px，超出部分最多拿走剩余空间的 2 份之一（相对于 1fr 的 1 份）。
- 避免写
25% 1fr 1fr期望三等分——第二、三列加起来才占 75%，它们各自只分到 37.5% - 百分比列建议放在开头或结尾，中间插百分比容易让后续
fr可用空间难以预估 - 若容器本身宽度不固定（如 flex 容器子项），百分比可能因父级收缩而失效，此时应优先考虑
minmax()+fr
fr 单位在不同浏览器中的表现一致性
fr 是 CSS Grid Level 1 标准特性，在 Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 中行为一致，无需前缀。但要注意 Safari 旧版本（grid-template-columns 声明，降级为 block 流式布局。
真正容易出问题的是嵌套 Grid：外层用 %，内层用 fr，而外层容器宽度由 fit-content 或 max-content 决定时，内层 fr 的“剩余空间”可能为 0 或意外值。
- 调试技巧：在 DevTools 中临时把
fr换成px（如1fr → 200px），确认列是否出现——若仍不显示，说明问题不在fr，而在容器尺寸或display: grid是否生效 - 不要依赖
fr实现精确像素控制；它本质是分配比例，不是设定宽度 - 当需要兼容 IE11 时，必须放弃
fr，改用calc()模拟，例如calc((100% - 25%) / 2)
grid-auto-columns 对 fr 和 % 的影响
grid-auto-columns 只作用于**隐式网格轨道**（即超出 grid-template-columns 显式定义列数的内容），它对显式声明中的 % 或 fr 完全无影响。
也就是说，即使你设了 grid-auto-columns: 1fr，也不会让 grid-template-columns: 50% 1fr 中的 50% 列变成弹性；它只管第 3 列、第 4 列……这些没被显式定义的列。
- 如果你动态插入大量子元素，又没设
grid-template-columns覆盖足够列数，grid-auto-columns才会接管 - 混用单位时，
grid-auto-columns最好也用fr或minmax()，避免与显式列产生尺寸冲突 - 不要试图用
grid-auto-columns: 50%来“延续”百分比逻辑——它会被当作每个隐式列都占容器 50%，导致重叠或溢出
实际布局中，混用 % 和 fr 的难点不在语法，而在于脑内实时建模“百分比先扣、fr 后分”的两阶段计算过程。多数错觉来自把它们当成同一种缩放机制。
