fr 单位比百分比更可靠地实现“占满剩余空间”，因其基于剩余可用空间等分、不受固定列宽或边框内边距干扰；常见失效原因包括父容器未设 display: grid、混用其他布局及 box-sizing 问题。
用 fr 单位让网格项占满剩余空间，比百分比更可靠、更语义清晰——它不依赖父容器已知宽度，也不受边框/内边距干扰。
为什么 fr 比 % 更适合“占满剩余空间”场景
百分比是相对于父容器总宽计算的，一旦其他列用了固定值（如 200px）或内容撑开，100% 就会溢出或错位；而 fr 是“剩余可用空间”的等分单位，自动扣除已分配空间后才分配。
-
grid-template-columns: 200px 1fr 2fr→ 第二列占剩余空间的 1/3，第三列占 2/3 -
grid-template-columns: 200px 1fr→ 第二列直接吃掉所有剩余宽度，不需算百分比 - 边框、
padding、gap不影响fr计算逻辑，但会让百分比布局偏移
fr 与 auto/minmax() 搭配控制最小高度/宽度
纯 1fr 可能导致内容被过度压缩（比如文字换行异常），需要配合约束：
- 让某列至少 300px 宽，其余空间自适应：
grid-template-columns: 300px minmax(300px, 1fr)) - 让主内容区占满剩余高度（常用于侧边栏+主区布局）：
grid-template-rows: auto 1fr - 避免
1fr被内容撑爆：给网格项加min-width: 0或overflow: hidden（尤其含长单词或 URL 时）
常见错误：fr 没生效的三个原因
写了 1fr 却没占满？大概率卡在这几个点：
- 父容器没设
display: grid或display: inline-grid——fr只在 Grid 上下文有效 - 用了
width: 100%或flex布局混用，导致网格容器本身没占满父级 - 存在未重置的
box-sizing，比如子项有border且box-sizing: content-box，实际宽度超出fr分配值
真正要占满剩余空间，核心就一条：明确谁是容器、谁是项、谁负责分配——fr 是容器的声明，不是子项的样式。写错位置，再怎么调参数也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
