1fr列“失效”是因子项默认min-width:auto锁定min-content宽度，需双管齐下：轨道用minmax(0,1fr)并为.grid > .item设min-width:0，再配white-space:nowrap、overflow:hidden、width/max-width才能使text-overflow:ellipsis生效。
因为 Grid 子项默认 min-width: auto，浏览器会按内容最小固有宽度（min-content）来确定轨道能缩到多窄，哪怕你写了 1fr，它也不会压缩文本——不是 bug，是规范行为。
为什么 1fr 列看起来“完全失效”
常见现象：两列写 grid-template-columns: 1fr 1fr，但 DevTools 的 Computed 面板里宽度分别是 842px 和 12px。这不是渲染错乱，而是浏览器在布局阶段就决定：只要某个子项内容（比如 https://example.com/very/long/path）的 min-content 超过分配宽度，整条轨道就被拉宽到那个值。
关键点：
-
1fr本身不设收缩下限，等价于minmax(min-content, 1fr) -
white-space: nowrap会让文本彻底失去换行弹性，进一步锁定min-content宽度 - 仅改容器样式（如给
.grid加min-width: 0）完全无效——必须作用于网格直接子元素
text-overflow: ellipsis 不生效的真正原因
它需要四个条件同时满足，漏掉任意一个都白搭：
-
min-width: 0（解除子项默认的min-width: auto保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（裁剪溢出部分） -
width或max-width（提供截断基准，不能是auto）
最常被忽略的是第一项：min-width: 0 必须写在 .grid > .item 上，而不是父容器或抽象类名。否则浏览器根本没获得“压缩权”，其余三项全加也没用。
怎么从源头切断撑开逻辑
光靠子项样式不够可靠，尤其在 auto-fit、嵌套 Flex 或响应式场景下，得双管齐下：
- 轨道定义层：把
1fr换成minmax(0, 1fr)，例如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)或repeat(3, minmax(0, 1fr)) - 子项样式层：对
.grid > .item显式设min-width: 0 - 若子项内部用了
display: flex，它的直接子元素也得加min-width: 0，否则撑开会逐层传导 - 图片等替换元素要额外加
max-width: 100%和height: auto，它们同样受min-width: auto影响
真正容易被忽略的是：这个限制不是 Grid 独有，所有弹性布局（Flex/Grid）子项都默认 min-width: auto；而 min-width: 0 是唯一能安全“松绑”的方式——它不破坏布局流，也不引发塌陷，只是让 fr 单位真正回归弹性本质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
