只给 grid 容器加 overflow: hidden 基本无效，真正起效需三者齐备：grid-template-columns 使用 minmax(0, 1fr)、直接子项设 min-width: 0、子项自身配 overflow: hidden 及对应文本截断样式。
只给 grid 容器加 overflow: hidden 基本无效——溢出不是内容“跑出来”，而是子项把轨道和容器一起撑大了。真正起效必须同时满足三个条件：轨道允许收缩、子项放弃最小宽度锁定、内容自身有裁剪逻辑。
grid-template-columns 用 minmax(0, 1fr) 而不是 1fr
1fr 实际等价于 minmax(auto, 1fr)，而 auto 就是 min-content。长 URL、无空格英文、未约束的图片都会触发这个最小尺寸，直接拉宽整列。
- 写成
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)才显式允许轨道缩到 0 - 搭配
repeat(auto-fit, minmax(0, 200px))比auto-fill更安全，避免空列占位 - Safari 14.1 及更早版本对
minmax(0, ...)解析不稳定，可用@supports (grid-template-columns: minmax(0, 1fr)))做降级
网格项（直接子元素）必须设 min-width: 0
min-width: auto 是默认值，它等价于“按内容最小宽度锁定”，轨道再弹性也缩不动。这个样式必须落在网格容器的**直系子元素**上，不是容器本身，也不是孙子节点。
- 正确写法：
.grid > * { min-width: 0; }或具体类名如.grid-item { min-width: 0; } - 如果子项内部用了
display: flex或嵌套grid，它的直接子元素也得加min-width: 0，否则撑开会传导 - 第三方组件（如 Ant Design Card）默认不带，得手动覆盖；Vue scoped 样式要用
:deep(.grid-item)
图片等替换元素要脱离文档流
<img>、<iframe></iframe> 这类替换元素有固有尺寸，仅靠 min-width: 0 加在它自己身上没用——必须作用于它的父网格项，并让图片脱离布局计算。
- 父项加
position: relative，图片加position: absolute; top: 0; left: 0; width: 100%; height: 100% - 图片自身加
object-fit: contain（保比例）或cover（填满），别用max-width: 100%+height: auto，那是在错误基准上缩放 - 若需文字叠加，文字层要加
position: relative; z-index: 1，否则被绝对定位图片盖住
文字截断必须三者齐备
overflow: hidden 单独存在时，对文本完全不起作用。单行省略、多行省略、自动换行，每种场景依赖不同组合，漏一个就失效。
- 单行省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，且该元素要有明确宽度（来自grid-template-columns或max-width） - 多行省略（现代浏览器）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden - 长无空格文本（如哈希、base64）：
word-break: break-all（暴力）或overflow-wrap: break-word（更温和）
最常被忽略的是层级判断：不是“整个 Grid 容器要不要加 min-width: 0”，而是“当前这个溢出的元素，它的父容器是不是网格项？它的父容器的父容器有没有嵌套 Flex/Grid？”。漏掉一层，问题就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
