用 repeat(auto-fit, minmax(0, 1fr)) + min-width: 0 可解决小屏 grid 溢出问题，根本原因是轨道未真正压缩、子项未释放最小宽度限制，且需同时满足容器约束、列定义和子项三者条件。
直接用 repeat(auto-fit, minmax(0, 1fr)) + min-width: 0 就能解决，但漏掉任意一环都会失效——不是 Grid 写错了，而是子项卡在门口没进门。
为什么小屏下 Grid 列数变少却还是溢出？
常见现象：大屏显示 4 列正常，小屏缩成 2 列后文字或图片顶破边框、触发横向滚动条。根本原因不是列数少了，而是轨道没被真正压缩。
-
auto-fit确实会丢弃空列，但它只管“生成几列”，不管“每列能不能缩” - 如果轨道写的是
1fr（而非minmax(0, 1fr)），浏览器仍按子项min-content分配最小宽度，长 URL 或无空格英文串直接撑爆整列 - 容器没设
max-width或width，导致它无限伸展，overflow: hidden完全不生效
必须同时满足的三个条件
缺一不可，否则所有样式都是白忙活。
- Grid 容器要有明确宽度约束：
max-width: 100%或width: 100vw（避免父级撑开） - 列定义必须用
minmax(0, 1fr)，不能只写1fr；推荐写法：grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) - 每个直接子项（
.grid > .item）加min-width: 0；嵌套 Flex/Grid 的子元素也要加，比如.item > .content
文字和图片不配合，轨道缩了也没用
轨道收缩解决的是“布局空间分配”，但内容渲染行为还得单独控制。
- 长无空格文本（URL、JSON 字段）：加
word-break: break-all或更温和的overflow-wrap: break-word - 单行标题截断：必须三者齐备 ——
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 图片：
img { max-width: 100%; height: auto; display: block; }；若父容器有padding，还需box-sizing: border-box+width: 100%
Safari 14.1 及更早版本解析异常
minmax(0, 1fr) 在旧 Safari 里会被忽略，退回到 1fr 行为，导致溢出重现。
- 用
@supports (grid-template-columns: minmax(0, 1fr))做特性检测 - 降级方案可回退到
repeat(auto-fit, 1fr)+ 更强的内容约束（如强制word-break、max-width） - 真正难的不是写对语法，而是在多层嵌套中判断「该在哪一层加
min-width: 0」——Grid 容器？某条grid-template-rows？还是某个grid-area的直接子元素？漏一层，溢出就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
