fr单位表示剩余空间份数而非比例尺，浏览器先扣除固定尺寸（px、gap、minmax最小值等），再将剩余空间按份数分配；混用fr与%或忽略子元素min-width:0会导致比例失准。
fr单位不是比例尺，而是剩余空间份数
写 grid-template-columns: 1fr 2fr 并不保证左边占 1/3、右边占 2/3 —— 它只在“没有其他尺寸干扰”时才近似成立。浏览器真正执行的是：先扣除所有固定占用（px、gap、minmax() 最小值、内容固有宽），再把剩下的空间按份数切分。
常见错误是把 fr 当成 % 用，比如混写 1fr 50%，结果第二列先抢走父容器 50% 宽度，剩下空间才给 1fr，导致比例完全失控。
- 固定宽（如
240px）优先级最高，直接扣减 -
minmax(320px, 1fr)中的320px是第二高优先级，也先扣 -
fr只在最后一步参与计算，且只分“剩余”的那份蛋糕
后台三栏布局中 fr 比例失准的典型原因
例如 grid-template-columns: 240px 1fr 320px，你以为中间占满剩余，但若主内容区有个未约束的长 URL 或图片，它会撑开整列，导致 1fr 实际宽度远超预期，甚至触发横向滚动。
这不是 fr 失效，而是子元素默认 min-width: auto 强制保留最小内容宽，压过了 fr 的分配逻辑。
- 必须给子元素加
min-width: 0或max-width: 100% - 对文本类内容补上
overflow-wrap: break-word - 避免在
fr轨道里放width: 300px这类硬编码尺寸的子项
想让 1fr 2fr 真正按 1:2 分配？先清空干扰项
要逼近理论比例，得确保没有内容或样式偷偷占位。最稳妥的做法是显式清除所有可能挤压的空间来源：
- 父容器设
display: grid+ 显式grid-template-columns（不能只靠grid-auto-columns） - 移除所有
gap，或把gap值计入总扣除量（比如gap: 16px会从每行间隙中扣两次） - 子元素统一加
min-width: 0，尤其当它内部含flex或inline-block时 - 慎用
auto：和fr同行写auto 1fr，auto会先吃掉内容最小宽，1fr只能分残羹
示例：想要严格 1:2，就别写 200px 1fr 2fr，而改用 minmax(200px, 200px) 1fr 2fr —— 把固定宽也纳入 minmax()，语义更清晰，浏览器计算路径也更确定。
grid-template-areas + fr 是语义化精准控制的组合解
纯数字轨道（如 grid-column: 2 / 4）容易错位，而用命名区域配合 fr，既能表达意图，又能隔离干扰。
比如定义 grid-template-areas: "header header" "nav main" "footer footer"，再通过 grid-template-columns: 240px 1fr 控制实际尺寸，nav 和 main 就天然绑定到对应列，不会因子元素撑开而偏移整体结构。
-
grid-area值必须和grid-template-areas中的字符串**完全一致**（包括大小写、空格、引号） -
.表示空单元格，不能用空格代替，否则声明无效 - 跨多行区域（如通栏侧边栏）要重复写，如
"nav nav" "nav nav"，不能依赖grid-row: 1 / -1
真正难的不是算出 1fr 和 2fr 各多少像素，而是守住“哪些东西不该去动剩余空间”这个边界——一旦内容、gap、minmax 最小值、滚动条都归位，fr 自然就准了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
