Grid子项默认min-width: auto导致内容撑宽轨道，需设min-width: 0并配合minmax(0, 1fr)、white-space: nowrap、overflow: hidden及width/max-width才能使text-overflow: ellipsis生效。
子项默认 min-width: auto 是罪魁祸首
Grid 子项不是“被撑破”，而是浏览器按 min-width: auto（即内容最小宽度）计算尺寸，长 URL、无空格英文、base64 字符串、未约束图片都会强制拉宽轨道。你在 DevTools 里看到 grid-template-columns: 1fr 1fr 没变，但实际列宽严重不均，就是这个原因。
常见现象：text-overflow: ellipsis 不生效、两列等宽变成一宽一窄、嵌套 display: flex 后整行被顶高。
- 必须在 grid 直接子元素（即
.grid > .item）上设min-width: 0，不是容器，也不是嵌套的内层 div - 如果子项内部用了
display: flex，它的直接子元素也得加min-width: 0，否则撑开会逐层传导 -
overflow: hidden单独加没用——它只裁剪视觉，不改变尺寸计算逻辑
1fr 轨道根本不会收缩到内容之下
1fr 的意思是“等分剩余空间”，但它**不设下限**。遇到不可折行内容时，轨道会被迫拉宽到 min-content 宽度，导致其他列被压缩甚至消失。
解决办法是把 1fr 替换成 minmax(0, 1fr)，显式告诉浏览器：“这列可以缩到 0，别管内容多宽”。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 搭配
repeat()时，repeat(auto-fit, minmax(0, 1fr))才能真正响应窄屏 - Safari 14.1 及更早版本对
minmax(0, 1fr)解析不稳定，可用@supports (grid-template-columns: minmax(0, 1fr))做特性检测
容器没高度约束，overflow 就是摆设
给 Grid 容器加了 overflow: auto 却没滚动条？大概率是因为容器本身没高度约束。overflow 失效的根本原因是：Grid 容器默认按内容伸展，即使设了 overflow，也会无限撑高，滚动永远触发不了。
- ✅ 正确做法：加
max-height: 300px或height: 300px，再配overflow: auto - 优先用
max-height，更适应响应式场景 - 若容器在 flex 或绝对定位上下文中，边界可能不明确，此时更要靠
max-height + minmax(0, 1fr)双保险
text-overflow: ellipsis 四个条件一个都不能少
单行省略不是加了 text-overflow: ellipsis 就完事。它只在四个条件同时满足时才生效：
-
min-width: 0（解除 grid item 最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（裁剪溢出） -
width或max-width（提供截断基准，不能是auto或100%，尤其跨列时失效）
漏掉任意一个，比如只写了 text-overflow: ellipsis 和 overflow: hidden，但没设 min-width: 0，它就永远不会显示省略号。
