fr列被长文本撑开的根本原因是1fr不设下限且子项默认min-width: auto，必须同时设置minmax(0, 1fr)和子项min-width: 0，并配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及max-width才能使省略号生效。
fr单位本身不溢出，是它默认不设下限 + 子项默认min-width: auto共同导致的强制撑开。
fr列被长文本顶宽的根本机制
浏览器把1fr理解为“等分剩余空间”，但它不参与内容最小尺寸计算。当一列里塞进无空格长URL、JSON字段或连续英文单词时，该列的直接子元素（比如.grid-item）默认min-width: auto（≈内容最小宽度），会拒绝压缩——哪怕轨道只剩1px，它也要硬占200px，结果整列被拉宽，其他列被挤塌。
你在开发者工具里看到grid-template-columns: 1fr 1fr没变，但Computed宽度严重不等，就是这个原因。
-
fr只管“怎么分剩余空间”，不管“能不能缩” - 子项不设
min-width: 0，等于给它穿了防缩甲 - 嵌套Flex/Grid子项若也没加
min-width: 0，撑开会逐层传导
为什么text-overflow: ellipsis写了也不生效
不是text-overflow: ellipsis失效，是它根本没触发条件——它只在同时满足以下四点时才工作：
-
min-width: 0（解除子项最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
max-width或width（提供截断依据，不能是auto）
缺一不可，且必须全部作用于同一个元素（即.grid > .item）。只写后三项，min-width: auto仍在挡路，所有样式都被忽略。
minmax(0, 1fr)不是替代fr，而是释放它的弹性
写minmax(0, 1fr)不是为了“换个写法”，是显式告诉浏览器：“这列可以缩到0，别管内容多宽”。它在轨道定义层生效，比依赖子项样式更底层、更可靠。
- 三列等分应写：
grid-template-columns: repeat(3, minmax(0, 1fr)) - 响应式列数推荐：
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))) - 别混用：
minmax(0, 1fr) auto会导致auto列抢走最小宽度，破坏比例 - Safari 14.1及更早对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))做特性检测
最容易被忽略的实操细节
真正难的不是写对minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加min-width: 0”：是Grid容器？某条grid-template-rows？还是某个grid-area的直接子元素？
图片、<pre class="brush:php;toolbar:false;"></pre>、<table>等固有尺寸元素尤其容易漏掉这步；如果子项内还有嵌套Grid/Flex，其直接子元素也得加<code>min-width: 0。缓存和Computed值未刷新也会让你误判——真遇到不生效，先检查Computed里min-width是否确实是0，而不是auto或继承来的其他值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
