Grid子项默认min-width: auto会强制撑开轨道，需显式设min-width: 0并配合minmax(0, 1fr)、white-space: nowrap、overflow: hidden及width/max-width才能使text-overflow: ellipsis生效。
Grid子项默认min-width: auto会强制撑开轨道
这不是bug，是CSS规范行为：每个grid item默认min-width: auto，等价于min-content——浏览器会按内容自然最小宽度（比如一个无空格URL）来确定该轨道能缩到多窄。哪怕你写了grid-template-columns: 1fr 1fr，实际Computed宽度也会严重不均。
常见现象包括：text-overflow: ellipsis不生效、两列布局变成一宽一窄、嵌套display: flex后整行被顶高。DevTools里看Styles可能显示正常，但切到Computed面板，min-width值大概率还是auto。
- 必须在
.grid > .item层级显式设min-width: 0，写在容器上或仅用类名.item都不行 - 如果子项内部还用了
display: flex，它的直接子元素也得加min-width: 0，否则撑开会逐层传导 -
overflow: hidden单独加没用——它只裁剪视觉，不改变尺寸计算逻辑
1fr本身没有收缩下限，需改用minmax(0, 1fr)
1fr的意思是“等分剩余空间”，但它不设下限。遇到https://verylongurlwithoutspaces这种内容，轨道会被迫拉宽到min-content宽度，其他列就被压缩甚至消失。
解决办法是把1fr替换成minmax(0, 1fr)，告诉浏览器：“这列可以缩到0，别管内容多宽”。这个0不是像素意义上的“消失”，而是触发Grid的收缩逻辑，让overflow和text-overflow真正有机会生效。
立即学习“前端免费学习笔记（深入）”；
- 适用于
repeat(5, 1fr)这类写法，直接改成repeat(5, minmax(0, 1fr)) - 比只靠子项样式更底层、更可靠，尤其在
auto-fit/auto-fill场景下必须用 - 若同时用了
white-space: nowrap，minmax(0, 1fr)几乎成了刚需
text-overflow: ellipsis生效需要四个条件同时满足
很多人以为加了text-overflow: ellipsis就完事，其实它只在特定组合下触发。缺一不可：
-
min-width: 0（解除grid item最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
width或max-width（提供截断依据，不能是auto）
其中min-width: 0是最容易漏掉的一环。没它，其余三个全加也没用——浏览器根本没获得“压缩权”，连开始计算截断的机会都没有。
图片和替换元素也要单独处理
长文本只是常见诱因，<img>、<iframe>、<canvas>这些替换元素同样会撑开轨道，因为它们也有隐式的min-width: auto。
- 图片必须加
max-width: 100%+height: auto，否则即使min-width: 0也无效 - 替换元素若设置了固定
width或height，要检查是否突破了网格轨道约束 - 所有处理都得落在
grid直接子元素上，不要指望父容器的overflow: hidden兜底
真正麻烦的从来不是写多少行CSS，而是每一层嵌套都可能重新激活min-width: auto——从grid item到它里面的flex容器，再到flex item，漏一层，撑开就传一层。
