根本原因是grid子项默认min-width: auto强制撑开轨道，必须在.grid > .item上设min-width: 0，并配合white-space: nowrap、overflow: hidden、max-width/width四者缺一不可，否则text-overflow: ellipsis等截断样式均无效。
内容过长导致 Grid 错位，根本不是“内容太长”，而是 min-width: auto 在作祟——它让子项死守内容最小固有宽度，强行撑开轨道。不加 min-width: 0，其他所有样式都只是表面功夫。
为什么 text-overflow: ellipsis 在 Grid 里不生效
四个条件必须同时满足，缺一不可：
-
min-width: 0必须写在.grid > .item上（不能只写.item，也不能写在容器上） -
white-space: nowrap禁止换行 -
overflow: hidden触发裁剪逻辑 -
max-width或width提供截断依据（auto不行）
常见错误是只写后三项，或把 min-width: 0 加在父容器上。开发者工具里检查 Computed 面板，如果 min-width 还是 auto，那就没生效。
为什么长 URL 或 base64 字符串会撑破 1fr 列
1fr 实际等价于 minmax(min-content, 1fr)，而 min-content 对无空格长串来说就是整段字符串宽度。解决方法有两个方向：
- 在子项上加
min-width: 0+overflow-wrap: break-word（适合用户可见文本，如链接、邮箱） - 在轨道定义层就切断源头：用
minmax(0, 1fr)替代1fr，例如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 对 token、哈希这类无语义字符串，用
word-break: break-all，但必须限定作用域（比如只加在.token-value类上）
Safari ≤14.1 不支持 minmax(0, 1fr)，可降级为 minmax(min-content, 1fr) + 子项 min-width: 0 + width: 100%。
嵌套 display: flex 容器时为何错位更严重
Grid item 默认 min-width: auto，它里面的 flex 容器也默认 min-width: auto，两者叠加，撑开效果会逐层传导。修复必须分层处理：
- 第一层：
.grid > .item { min-width: 0; } - 第二层：如果
.item内部有display: flex的容器，也得加min-width: 0 - 再往里如果有图片、
iframe等替换元素，它们本身可能带固有宽高，需额外加max-width: 100%或width: 100%
漏掉任何一层，错位就可能复现。这不是 bug，是浏览器按规范逐层计算尺寸的必然结果。
真正容易被忽略的是：这个行为和 Grid 本身无关，只要是 display: grid 或 display: flex 的直接子元素，都会继承 min-width: auto。所以别只盯着 Grid 写样式，得一层一层看 DOM 结构里谁在撑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
