1fr失效的根本原因是父容器无确定宽度或子项min-width:auto锁死轨道；需同时设置grid-template-columns:minmax(0,1fr)和子项min-width:0才能解决。
不是 fr 失效了，而是它根本没空间可分——父容器宽度没确定，或者子项用 min-width: auto 把轨道锁死了。
父容器没有显式宽度上下文
浏览器计算 1fr 的前提是：父容器得先有明确的可用宽度。如果它只是个默认 width: auto 的块级元素，又没被 flex、grid 或其他布局约束住，那它的实际宽度就只由内容撑开，fr 没“剩余空间”可切。
- 打开开发者工具 → 选中 Grid 容器 → 看
Computed面板里的width值，不是看Styles里写了什么 - 常见表现：两列
1fr 1fr挤成一条竖线，或列宽显示为0px - 临时加
width: 100%或max-width: 800px; width: 100%能立刻验证是否是这个问题 - 若 Grid 容器在 Flex 项目里，必须加
flex: 1或min-width: 0，否则默认min-width: auto会阻止它收缩
子项默认 min-width: auto 锁死轨道宽度
即使父容器宽度正常，1fr 列也可能严重不等宽。这不是 fr 失效，而是每个网格项默认 min-width: auto，强制轨道宽度 ≥ 其内容最小宽度（min-content）。一个没空格的 URL、长单词、或未设 max-width 的图片，就能把整列顶宽。
- 在
Computed面板里检查任意一个网格项的min-width，如果值是auto（不是0），就是它在作祟 - 必须同时改两处：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)+.grid > .item { min-width: 0 } - 只改一边，90% 的问题照旧；子项内部还有
display: flex或display: grid，它们的直接子元素也得加min-width: 0 -
overflow: hidden单独加在容器上无效——内容没溢出，是轨道被撑开了
混用 fr 和固定单位破坏分配逻辑
写成 grid-template-columns: 200px 1fr 1fr，表面看后两列等宽，但 1fr 分的是「减去 200px 后的剩余空间」。当容器总宽刚好卡在临界点（比如 420px），两个 1fr 各得 110px —— 若其中一列内容 min-content 是 150px，它就会撑破，另一列被压扁甚至换行。
- 要真等宽，所有列都用
1fr，别掺px、%或auto - 需要固定列（如侧边栏），改用
minmax(min-content, 1fr)或fit-content(250px)，比纯250px更健壮 - 检查是否误用了
grid-auto-columns，它会在显式定义之外悄悄补列，干扰预期比例 -
gap会从总空间中扣除，参与fr计算；而border和padding不扣，但会影响视觉一致性，记得设box-sizing: border-box
真正容易被忽略的是：这两处改动（minmax(0, 1fr) + min-width: 0）必须同时存在，缺一不可。很多人试了其中一个发现没用，就以为方案失效，其实是漏掉了关键一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
