overflow: hidden加在grid容器上无效，因撑破源于轨道被min-content拉宽；必须同时将1fr替换为minmax(0, 1fr)并在直接子项设min-width: 0，才能使overflow生效。
为什么 overflow: hidden 加在 grid 容器上没用
因为撑破行为发生在轨道（track）计算阶段，不是内容“溢出容器”——浏览器先根据子项的 min-content 拉宽列宽或行高，再把内容塞进去。此时内容根本没超出容器边界，overflow: hidden 只裁剪像素，不干预轨道尺寸逻辑。
常见错误现象：.grid { overflow: hidden; } 写了，但一串长 URL 还是把整列拉宽，右侧网格错位。
真正该起作用的是轨道定义和子项最小尺寸约束，不是容器的 overflow。
必须同时改两处：minmax(0, 1fr) + min-width: 0
min-content 不是 CSS 属性，而是浏览器内部计算值（比如一个无空格长单词的自然宽度）。它隐式影响 1fr（等价于 minmax(min-content, 1fr)）和 auto 轨道。想绕过它，就得显式覆盖下限：
- 在
grid-template-columns或grid-template-rows中，把1fr换成minmax(0, 1fr)—— 让轨道本身可收缩到 0 - 在网格直接子元素（
.grid > *）上加min-width: 0（水平方向）或min-height: 0（垂直方向）—— 解除子项默认的min-width: auto保护
只改一边，大概率白忙活。漏掉任何一环，撑破现象就会回来。
子项上加 overflow 才真正生效
若需文字截断，overflow: hidden 必须加在子项自身，并配齐三者：
white-space: nowrapoverflow: hiddentext-overflow: ellipsis
若需自动换行，则用 overflow-wrap: break-word，同样依赖 min-width: 0 才能触发换行而非撑开。
注意：给卡片类组件的描述区（如 .card-desc）加 overflow: hidden 却没设 min-width: 0，长昵称仍会把整列拉宽。
Safari 和嵌套 Grid 最容易翻车
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析不稳定，可能让列宽归零或错乱；而嵌套 Grid（比如 .grid-item 里又套了一层 display: grid）时，min-width: 0 必须作用在每一层的直接子项上，否则溢出会逐层传导。
真正难的不是写对一行 minmax(0, 1fr)，而是判断“该在哪一层加”——Grid 容器？某条 grid-template-rows？还是某个具体 grid-area 的直接子元素？漏掉任何一环，撑破就回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
