grid列宽溢出的根源在于轨道定义与子项收缩约束未协同，需同时设置minmax(0, 1fr)和子项min-width: 0，否则长内容仍会撑开列。
Grid列宽溢出不是样式没写对，而是轨道尺寸和内容收缩能力没协同好。直接改 grid-template-columns 很少能根治，关键在「轨道定义 + 子项收缩约束」双生效。
为什么 1fr 列会被长文本撑开
浏览器把 1fr 理解为“等分剩余空间”，但它默认不设最小宽度下限；遇到无空格长URL、JSON字段或连续英文单词时，子项的 min-width: auto（即 min-content）会强制拉宽整列，其他列被迫压缩甚至消失。你在开发者工具里看到 grid-template-columns: 1fr 1fr 没变，但计算出的两列宽度严重不等，就是这个原因。
-
minmax(0, 1fr)才是释放1fr弹性的必要声明——它告诉浏览器：“这列可以缩到 0，别管内容多宽” - 只改轨道不加
min-width: 0，90% 的溢出问题照旧 - 嵌套的 Flex/Grid 子项若没同步加
min-width: 0，撑开会逐层传导
minmax(0, 1fr) 怎么用才不翻车
这不是替代 1fr 的技巧，而是让它真正起效的前提。写法必须精准：
- 正确：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) - 搭配
repeat()时用repeat(auto-fit, minmax(0, 1fr))，auto-fill会保留空轨道，容易导致窄屏溢出 - 避免混用：
minmax(0, 1fr) auto会导致auto列抢走最小宽度，破坏比例 - Safari 14.1 及更早版本对
0解析异常，可用@supports (grid-template-columns: minmax(0, 1fr))做特性检测
光有 minmax(0, 1fr) 还不够：子项必须主动收缩
minmax(0, 1fr) 只是开了门，子项得自己愿意进门。网格直接子元素（如 .grid > .item）必须显式设 min-width: 0，否则它仍顶着 min-content 不缩，轨道收缩失败，overflow: hidden 压根没机会裁剪内容。
- 必须写成
.grid > .item { min-width: 0; }，避免影响非 Grid 上下文 - 图片、
<pre class="brush:php;toolbar:false;"></pre>、<table> 等固有尺寸元素尤其容易漏掉这步 <li>若子项内还有嵌套 Grid/Flex，其直接子元素也得加 <code>min-width: 0 - 要让文字截断，还得配
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可） - 把固定像素最小值换成
0：minmax(0, 1fr)，允许轨道压缩到内容实际所需最小尺寸 - 确保父容器没设
min-width或固定width，否则 Grid 轨道被锁死，1fr也分不到空间 - 图片溢出不是 Grid 问题，是子项没约束：
img { max-width: 100%; height: auto; min-width: 0; } - 长单词需额外加
word-break: break-word或overflow-wrap: break-word
小屏幕横向滚动条的真凶和解法
小屏出现横向滚动条，90% 是因为写了 minmax(400px, 1fr) 这类写法——浏览器会死守 400px 最小宽度，哪怕屏幕只有 320px 也硬撑。这不是 bug，是规范行为。
最难的不是写对 minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加 min-width: 0”——漏掉一层，溢出就还在。它可能出现在 Grid 容器、某条 grid-template-rows、某个 grid-area 的直接子元素，甚至嵌套 Flex 的子项里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
