fr单位只在扣除固定尺寸、gap、内容最小宽度等后的剩余空间中按比例分配，而非整个容器宽度。
fr单位只分“剩下的蛋糕”，不是整个容器宽
很多人写 grid-template-columns: 1fr 2fr 后发现列宽比例不对，第一反应是“fr失效了”。其实不是失效，而是 fr 根本没拿到你想象中的那个“总宽度”——它只在扣除所有固定尺寸、内容最小宽度（min-content）、gap 和滚动条之后的剩余空间里按份数切分。
比如容器宽 900px，设了 gap: 20px，那实际可分配的剩余空间就是 900px − 20px = 880px；再加一列 200px 固定宽，剩余就只剩 680px，这时 1fr 2fr 才在这 680px 里按 1:2 分，不是在 900px 里分。
常见错误现象：
- 两列写成
1fr 1fr，但视觉上不等宽 → 很可能某列有未设box-sizing: border-box的padding，挤占了内容区宽度 - 列里放长 URL 或中文无空格文本，整列被撑宽 → 默认
min-width: auto尊重内容最小宽度，fr 不会压缩它 - 嵌套 Grid 中子项宽度远小于预期 → 父项没设
min-width: 0，内部文本流把父项撑宽，破坏了外层 fr 的计算基础
混用 fr 和 auto / minmax() 时，顺序决定结果
浏览器不是边算边分，而是有明确的计算顺序：先满足所有非-fr 轨道的最小约束，再把剩下的空间交给 fr 分配。这个顺序直接影响最终列宽。
立即学习“前端免费学习笔记（深入）”；
例如：
-
grid-template-columns: auto 1fr→ 第一列宽度由内容最小宽度决定（比如文字“导航菜单”需 120px），剩下空间全给第二列 -
grid-template-columns: minmax(200px, 250px) 1fr→ 先确保第一列至少 200px，再把「容器宽 − 200px − gap」按比例分给两列 -
grid-template-columns: 1fr minmax(auto, 2fr)→ 第二列的minmax()下限是auto，仍会受内容挤压；而第一列的1fr会被动收缩
性能影响极小，但若写成 minmax(auto, 1fr) minmax(auto, 2fr) 这类嵌套弹性定义，在内容频繁变化时可能触发多次重排。
想防内容撑爆？别只写 1fr，试试 minmax(0, 1fr)
默认的 1fr 实际等价于 minmax(auto, 1fr)，其中 auto 表示“至少容纳最长单词或图片的自然宽度”。一旦内容过长，列就会被撑开，破坏比例感。
minmax(0, 1fr) 是更“守规矩”的写法：它告诉浏览器“下限为 0，别管内容多宽，按比例切就行”。配合 min-width: 0 和 overflow: hidden 或 word-break: break-all，能稳住布局。
注意兼容性：minmax(0, 1fr) 在 Safari 14.1+ 才稳定支持，旧版 Safari 会退化为 auto，所以关键业务场景仍需测试。
响应式侧边栏别硬调 fr，优先用 minmax() + media query
纯 200px 1fr 在窄屏下容易让侧边栏文字换行错乱，甚至图标溢出。直接加 min-width: 200px 没用——Grid 不读子元素的 min-width，它只认 grid-template-columns 定义。
正确做法是把固定列升级为弹性范围：
-
grid-template-columns: minmax(200px, 250px) 1fr→ 保底 200px，宽屏最多撑到 250px，提升可读性 - 小屏隐藏侧边栏？别靠 fr 缩小，用
@media (max-width: 768px)切成1fr单列，再配合grid-template-areas重排区域顺序 - 侧边栏含菜单时，最大值建议设
280px—— 足够放下两行中文+图标+箭头，又不浪费空间
真正容易被忽略的是：fr 对父容器的 padding、border、滚动条完全无感。务必确认父容器用了 box-sizing: border-box，否则内边距会从 fr 可用空间里偷偷扣走。
