必须用minmax(0, 1fr)而非1fr，因1fr等价于minmax(auto, 1fr)，默认按min-content（如长url）撑开列宽；minmax(0, 1fr)显式允许轨道缩至0，但须配合容器明确宽高、直接子项min-width: 0及嵌套子元素同理处理。
grid-template-columns 用 1fr 还是 minmax(0, 1fr)？
用 1fr 就是默认开启“撑开模式”：浏览器会按内容最小宽度（min-content）给轨道分配空间，长 URL、JSON 字段、无空格英文串直接把整列顶宽。必须换成 minmax(0, 1fr)，才真正允许轨道缩到 0。Safari 14.1 及更早版本对 0 解析异常，可用 @supports (grid-template-columns: minmax(0, 1fr)) 做降级检测。
为什么只给 grid 容器加 overflow: hidden 没用？
因为 overflow: hidden 只裁剪容器的「内容框」，而子项默认 min-width: auto，会优先撑开轨道甚至整个容器。生效前提有三：
- 容器本身要有明确宽高（比如
max-width: 600px或height: 400px） - 轨道用了
minmax(0, 1fr)（不是可选，是必须） - 网格直接子元素（如
.grid > .item）设了min-width: 0
漏掉任一，overflow: hidden 都只是摆设。
嵌套 Flex/Grid 的子项要不要加 min-width: 0？
要，而且必须逐层加。Grid 子项内部若用了 display: flex 或 display: grid，它的直接子元素也得显式写 min-width: 0——否则撑开会传导，外层加了也白加。常见翻车点：<img>、<pre class="brush:php;toolbar:false;"></pre>、<table> 这类固有尺寸元素，常被漏掉加固。
<h3>文字截断为啥 text-overflow: ellipsis 不生效？</h3>
<p>缺了 <code>min-width: 0 就永远不生效。它和 white-space: nowrap、overflow: hidden、明确宽度约束（来自 grid-template-columns 或 max-width）四者缺一不可。尤其注意：如果子项是 Flex 容器，那它内部的文本容器还得再配一遍这四件套——不是加一次就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
