内容溢出主因是minmax()最小值强制列宽、子项内容未约束及误用auto-fill；应改用auto-fit，设合理minmax下限，并加overflow/word-break/img约束。
内容溢出是因为 grid-template-columns 没留出足够空间
用 auto-fill 本身不会导致溢出，真正的问题是：你写了类似 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))，但容器宽度太小、子项内容又带固定宽/长文本/图片，导致单个网格单元被撑开，破坏了等分布局。
-
浏览器优先满足
minmax()的最小值（比如200px），哪怕父容器只有150px宽，它也会强制让列宽保持至少200px，造成横向滚动或溢出 -
auto-fill和auto-fit行为不同：前者会保留空轨道，后者会把剩余空间分配给已有列 —— 多数场景该用auto-fit - 如果子项含图片或长单词（如 URL），默认不换行、不缩放，也会顶破网格边界
用 auto-fit + minmax + 内容约束三件套才稳
真正防溢出的写法不是只靠 auto-fill，而是组合控制：
- 把
auto-fill换成auto-fit，避免空列占位 - 在
minmax()中设合理下限，比如minmax(160px, 1fr)，别硬写250px这种大值 - 给子项加
overflow: hidden、word-break: break-word或img { max-width: 100%; height: auto; }
section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))));
gap: 12px;
}
section > * {
overflow: hidden;
word-break: break-word;
}
section img {
max-width: 100%;
height: auto;
}
遇到 flex-wrap 类似效果？别硬套 grid
有人想用 grid 实现“自动折行+填满宽度”，结果发现内容一多就溢出，其实是误把 grid 当 flex 用。Grid 的 auto-fit 是按轨道分配空间，不是按子项流式排列。
- 如果目标是「尽可能多列，列宽一致，内容多就换行」，
auto-fit+minmax()是对的 - 但如果子项高度差异极大（比如有的卡片有 3 行文字，有的只有图标），grid 会按行对齐，导致大量空白 —— 此时更适合
display: flex; flex-wrap: wrap; - 不要给 grid 容器设死高度，否则
overflow: hidden会直接裁掉内容，而不是触发换行
调试时先看 computed styles 里的实际列数和宽度
溢出问题常因预期和实际不符。打开 DevTools，选中 grid 容器，在 Styles 面板里展开 grid-template-columns，看浏览器最终计算出几列、每列多少像素 —— 经常会发现：你以为生成了 4 列，其实只生成了 2 列（因为最小宽度卡住了），剩下内容全挤在第 3 列里。
立即学习“前端免费学习笔记（深入）”；
- 检查
minmax()第一个参数是否远大于容器可分配宽度 - 确认子项没有
white-space: nowrap或flex-shrink: 0这类阻止收缩的规则 - 临时加
border: 1px solid red到子项，看清是网格轨道窄了，还是内容本身没约束
实际项目里最常漏的是子项内部的文字截断和图片约束，auto-fit 只负责列数逻辑，管不了内容怎么“塞进去”。
