1fr 2fr不按1:2分配的根本原因是浏览器先扣除固定占用（px、gap、minmax最小值、内容固有宽）再分配剩余空间，若剩余不足或混用%、auto等单位，比例即失准。
fr单位不是“等分比例”，而是“剩余空间的份数”——写1fr 2fr不等于左边33%、右边67%，它只在没其他尺寸干扰时才近似成立。
为什么1fr 2fr有时根本不按1:2分？
浏览器先扣掉所有固定占用（px、gap、minmax()最小值、内容固有宽），再把剩下的空间按份数切。常见失准场景：
- 某列里塞了个
min-width: 400px的卡片，而容器总宽才500px → 剩余空间不足，1fr可能被压到50px，2fr只剩100px - 写了
grid-template-columns: 240px 1fr 2fr，但忘了gap: 1rem也会被提前扣除 → 实际分配的是“总宽 − 240px − 2×1rem” - 混用
%和fr，比如50% 1fr→%先占满一半，fr只能分剩下那半，结果第二列远小于预期
grid-template-areas + fr才是后台面板稳定骨架
纯数字线定位（如grid-column: 1 / 3）易受gap、隐式网格线影响；命名区域配合fr语义清晰且抗干扰：
-
grid-template-areas必须用带引号字符串，且大小写、空格、点号.（表示空单元格）要完全一致 - 跨行区域（如侧边栏）得写成
"nav nav" "nav nav"，不能靠grid-row: 1 / -1混用 -
grid-template-columns: 240px 1fr 320px定义宽度，grid-template-areas: "nav main sidebar"定义语义 —— 两者解耦，改布局不用动子元素grid-area - IE11不支持
grid-template-areas，降级时得用@supports包裹，fallback方案推荐display: flex+flex: 1
响应式列数控制别硬写媒体查询，用repeat(auto-fit, minmax())
手动写@media (max-width: 768px) { grid-template-columns: 1fr; }容易漏断点、难维护。更稳的做法：
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))：每列至少300px，够就多放，不够自动换行堆叠 -
auto-fit会合并空轨道，auto-fill保留空位 —— 响应式几乎都选auto-fit - 父容器若被
max-width或外层flex限制宽度，auto-fit会失去计算依据 → 检查父级是否设了width或flex-basis - 子项设了
min-width: 200px会直接压垮minmax()弹性 → 改用width: 100%或min-width: 0释放收缩性
嵌套Grid里1fr为啥不占满？
外层1fr的宽度不会传导给内层Grid，子Grid的1fr基于其**直接父项的可用宽度**计算：
- 父项没设
min-width: 0，内部长文本会撑开父项，导致子Grid可分配空间变小 - 子Grid容器默认
width: auto，不是继承外层比例 → 显式加width: 100%再定义自己的grid-template-columns - 子项用了
display: inline-block或white-space: nowrap，触发min-content优先级，fr被迫让步 - 别在子Grid里再写
1fr 1fr期望它占满屏幕 —— 它只占父项当前渲染宽度
真正容易被忽略的点：fr计算发生在Grid容器布局阶段，它不感知子元素内部的Flex或文本折行逻辑；所有约束（max-width、overflow-wrap、min-width: 0）都得主动加在子项上，否则fr再精准也救不了溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
