只给grid容器加overflow: hidden没用，因为grid容器默认不创建bfc，且子项默认min-width: auto（等价于min-content），浏览器优先撑开轨道而非裁剪内容；真正生效需三者缺一不可：grid-template-columns设为minmax(0, 1fr)、子项设min-width: 0、子项自身设overflow: hidden。
为什么只给Grid容器加overflow: hidden没用
因为Grid容器默认不创建BFC，子项又自带min-width: auto（等价于min-content），浏览器会优先撑开轨道，而不是裁剪内容。你看到文字或图片从右侧“漏出来”，不是样式没写，是裁剪根本没触发。
真正起效的组合是：minmax(0, 1fr) + 子项min-width: 0 + 子项自身overflow: hidden。漏掉任一，溢出照常发生。
-
grid-template-columns: 1fr→ 实际等价于minmax(auto, 1fr)，长URL照样撑开 -
grid-template-columns: minmax(0, 1fr)→ 显式允许轨道缩到0，是前提 - 给
.grid容器加min-width: 0→ 完全无效，必须作用于直接子元素 - 子项用了
display: flex→ 它的直接子元素也得加min-width: 0，否则内层继续撑
min-width: 0必须配哪些样式才生效
min-width: 0只是“松绑”开关，不决定内容怎么处理溢出。它解决的是“能不能缩”，不是“缩了之后怎么办”。要真正隐藏或换行，还得配对：
- 单行省略：
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis，且该元素要有明确宽度（来自grid-template-columns或max-width） - 长文本自动换行：
min-width: 0+overflow-wrap: break-word（推荐用于用户可见文本） - 无意义字符串暴力折行：
min-width: 0+word-break: break-all（适合哈希、base64，但iOS 15+前Safari有bug，需实测） - 图片/表格/
<pre class="brush:php;toolbar:false;"></pre>这类“硬茬”：必须额外加max-width: 100%、table-layout: fixed或overflow-x: auto，否则min-width: 0也救不了
嵌套Grid/Flex时min-width: 0加在哪一层
它只作用于**直系子项**。如果子项内部还有display: grid或display: flex，那个盒子也得单独加min-width: 0——否则撑开会传导下去，外层加了也白加。
- Vue中用
<style scoped></style>→ 必须写:deep(.grid-item)穿透作用域 - React里用
styled-components包装了组件 → 样式必须落在真实DOM节点上，不能只作用于包装器 - 第三方组件（如Ant Design的
Card） → 默认不带min-width: 0，得手动覆盖 - 绝对定位子元素（比如角标、气泡） →
overflow: hidden对它无效，父容器必须加position: relative才能裁剪
auto-fit和auto-fill别混用
repeat(auto-fill, minmax(0, 1fr))会在窄屏下保留空轨道，导致横向滚动；auto-fit才会把空轨道收缩归零，让现有列均分空间。
正确写法：grid-template-columns: repeat(auto-fit, minmax(0, 1fr))。若需保底宽度（如卡片最小320px），用minmax(320px, 1fr)，但别全局滥用——头像列可用minmax(min-content, 1fr)单独处理。
最常翻车的是嵌套层级判断：该在Grid容器加？某条grid-template-rows？还是某个grid-area的直接子元素？漏一层，溢出就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
