1fr失效的根本原因是浏览器缺乏剩余空间或子项阻止收缩；需同时设置minmax(0,1fr)和min-width:0，并确保父容器有确定宽度、box-sizing:border-box生效。
1fr 没有等分宽度，不是语法写错了，而是浏览器根本没“剩余空间”可分，或者子项死死卡住轨道不让它缩。
父容器没有确定宽度，fr 就是空转
你写了 grid-template-columns: 1fr 1fr，但容器本身 width 是 auto（比如一个普通 <div> 在文档流里），那它的实际宽度可能只由内容撑开——此时根本没有“剩余空间”，两个 1fr 只能分到 0px 或极窄值。
<p>常见表现：<code>Computed 面板里容器 width 显示为 fit-content 或远小于预期；两列挤成竖线；加 outline: 1px solid red 发现容器边界极窄。
- 临时验证：给容器加
width: 100%或max-width: 800px，看是否立刻等宽 - 若容器在 Flex 布局中，必须加
flex: 1或min-width: 0（否则默认min-width: auto会锁死收缩） - 嵌套 Grid 时，外层 1fr 不会传导给内层——子 Grid 容器需显式设
width: 100%
子项 min-width: auto 锁死轨道
即使容器宽度正常，一列仍被长 URL、无空格英文、未设 max-width 的图片顶宽，另一列被压扁甚至归零。这不是 fr 失效，而是每个网格项默认 min-width: auto，强制轨道宽度 ≥ 其 min-content。
检查方法：选中任意子项 → Computed 面板 → 看 min-width 是否为 auto。
- 必须同时改两处：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)+.grid > .item { min-width: 0 } - 只改一边，90% 的问题照旧；
minmax(0, 1fr)是轨道层放开下限，min-width: 0是子项层解除保护 - 子项内部还有
display: flex或display: grid？它们的直接子元素也得加min-width: 0
混用固定单位破坏分配逻辑
写成 grid-template-columns: 200px 1fr 1fr，后两列分的是「总宽 − 200px − gap」后的剩余空间。当容器刚好 420px，gap 为 1rem（≈16px），两个 1fr 各得约 92px——若其中一列内容 min-content 是 120px，它就会撑破，另一列被压缩至几乎不可见。
- 真要等宽，所有列都用
1fr，别掺px、%、auto - 需要固定列（如侧边栏），改用
minmax(min-content, 1fr)或fit-content(250px)，比纯250px更健壮 - 误用
grid-auto-columns会在显式定义外悄悄补列，干扰比例——检查是否漏写了grid-column或区域命名不一致
溢出修复不完整，内容仍在撑开
加了 minmax(0, 1fr) 和 min-width: 0，但内容还是溢出？问题在盒模型没对齐。
-
box-sizing: border-box必须作用于所有 grid 直接子元素，否则padding和border会额外加出去 - 子项若设了
width: 100%，又没box-sizing: border-box，就会撑破轨道 -
overflow: hidden单独加在容器上无效——内容没溢出，是轨道被撑开了；得先让轨道能缩，再配合white-space: nowrap; text-overflow: ellipsis才生效
真正容易被忽略的是：minmax(0, 1fr) 和 min-width: 0 必须同时存在，缺一不可。很多人试了其中一项就停手，结果问题还在——这不是优化技巧，是 CSS Grid 弹性行为的硬性依赖。
