1fr失效的根本原因是父容器缺乏宽度或高度上下文，而非Grid语法错误；它只分配父容器已确定的可用空间，若父容器width/height为auto或未设显式尺寸，则无剩余空间可分，导致列宽趋零或行高塌陷。
1fr 不是“自动均分”，而是“按父容器当前可用空间份数分配”——父容器没明确尺寸，它就无空间可分，自然失效。
父容器缺少宽度或高度上下文
这是最常见也最容易被忽略的根本原因。1fr 不会凭空造出空间，它只对父容器已确定的 width 或 height 进行分割。如果父容器是默认 width: auto 的块级元素，又没设 max-width、flex: 1 或 width: 100%，那它的实际宽度可能仅由内容撑开，导致两列 1fr 1fr 挤在极窄区域里，甚至在开发者工具中看到列宽为 0px。
- 打开浏览器开发者工具 → 选中 Grid 容器 → 切到 Computed 面板，确认
width和height实际值是否符合预期（不是看 Styles 里写了什么） - 临时加
outline: 2px solid red或border: 1px solid blue，直观观察容器真实渲染边界 - 若父容器是 Flex 项目，必须显式设
flex: 1、width: 100%或min-width: 0（后者防min-width: auto锁死收缩）
Grid 子项的 min-width: auto 在抢空间
即使父容器宽度正常，1fr 列也可能严重不等宽——这不是 1fr 失效，而是子项默认 min-width: auto 强制列宽 ≥ 内容最小宽度（比如一串未换行的 URL、长单词或图片）。此时 Computed 面板里子项的 min-width 是 auto 而非 0，就是证据。
- 给 Grid 直接子元素加
min-width: 0（注意选择器要精确，如.grid > .item，避免污染其他上下文） - 更底层的写法：改用
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)，从轨道定义层面允许压缩到 0 - 配合文本截断：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，否则min-width: 0只是放开限制，内容仍可能溢出
混用 fr 与固定单位破坏分配逻辑
写成 grid-template-columns: 200px 1fr 1fr 看似合理，但 1fr 分的是「减去 200px 后的剩余空间」。当容器总宽仅 420px 时，两个 1fr 各得 110px —— 如果其中一列内容最小宽度是 150px，它就会撑破，另一列被压扁甚至换行。
立即学习“前端免费学习笔记（深入）”；
- 要真等宽，所有列都用
1fr，别掺px、%或auto - 需要固定列（如操作按钮栏），改用
minmax(min-content, 1fr)或fit-content(80px)，比纯80px更健壮 - 检查是否误用了
grid-auto-columns，它会在显式定义之外悄悄补列，干扰预期比例
旧浏览器直接忽略 fr 语法
IE11 和 Safari 9–10.1 根本不识别 1fr，遇到 grid-template-columns: 1fr 1fr 会静默丢弃整条声明，回退为单列流布局。这不是计算错误，是语法层面不支持。
- 用
@supports (grid-template-columns: 1fr)测试：IE11 返回false，但@supports (display: grid)却返回true，这是典型陷阱 - autoprefixer 对
fr完全无效；-ms-grid-columns在 IE11 中语义不同，不能简单映射 - 兼容旧浏览器时，优先降级为
display: flex，而非硬套百分比 Grid（易因舍入误差、gap 计算断裂）
真正卡住 1fr 的，往往不是 Grid 写法本身，而是父容器的尺寸链断裂、子项的内在尺寸约束，或浏览器能力盲区。调试时盯紧 Computed 面板里的实际 width/height 和 min-width，比反复修改 grid-template-columns 有效得多。
