minmax(0, 1fr) 是解决 Grid 溢出的关键：其最小值设为 0 允许轨道压缩至内容最小尺寸，配合 auto-fit 实现移动端友好响应式布局，避免因固定最小宽度（如 300px）导致横向滚动。
grid 溢出是因为 minmax 的最小值设太大了
很多开发者用 minmax(300px, 1fr) 做响应式列宽，结果在手机上整行直接横向滚动——不是 CSS 没生效，而是 300px 这个最小宽度在屏幕小于 300px 时强制撑开容器，触发溢出。
关键点在于：minmax() 的第一个参数是「最小轨道尺寸」，浏览器会严格遵守，哪怕它比容器还宽。
- 手机屏幕宽度通常为 320px–414px（含边框/缩放），
minmax(300px, 1fr)在 320px 屏上只剩 20px 给间隙和内边距，极易破局 -
minmax(min, max)中的min不会自动退化，也不会被fit-content或auto覆盖 - 别指望
minmax(auto, 1fr)能“自适应最小”，它等价于minmax(min-content, 1fr)，仍可能超宽
用 minmax(0, 1fr) 替代固定像素最小值
把最小值设为 0 是最直接的解法：它允许轨道压缩到内容可接受的最小尺寸（比如文字换行后的高度、图片的 intrinsic size），同时保留 1fr 的弹性分配能力。
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 12px;
}
注意：repeat(auto-fit, ...) 必须配合 minmax() 使用才有效；auto-fit 会丢弃空轨道，auto-fill 则保留，后者在窄屏下更容易意外溢出。
-
minmax(0, 1fr)+auto-fit是移动端友好的黄金组合 - 如果某列必须保底（比如头像区域），单独给该列写
grid-column: auto / span 1或用minmax(min-content, 1fr)，但仅限该列 - 慎用
minmax(0px, 1fr)—— 显式写0px在某些旧版 Safari 中有兼容问题，0更稳妥
需要保底宽度？用 clamp() 替代 minmax()
如果业务要求「小屏至少 200px，大屏最多 300px，中间流体」，minmax() 无法实现三值约束，得换 clamp()：
.grid {
grid-template-columns: repeat(auto-fit,
minmax(clamp(200px, 100%, 300px), 1fr))
}
但注意：clamp(MIN, VAL, MAX) 里的 VAL 是「首选值」，在 Grid 中它不会自动参与 fr 分配，所以更稳妥的是：
.grid {
grid-template-columns: repeat(auto-fit,
clamp(200px, 1fr, 300px))
}
-
clamp(200px, 1fr, 300px)表示：最小 200px，理想是等分剩余空间，最大不超过 300px - 它比嵌套
minmax(clamp(...), 1fr)更简洁，且现代 Chrome/Firefox/Safari（≥15.4）均已支持 - IE 完全不支持
clamp()，如需兼容，退回媒体查询 + 固定断点
溢出检查不能只看 grid-template-columns
即使列宽控制住了，溢出还可能来自子项自身。常见漏点：
- 子元素写了
white-space: nowrap或display: inline-block且内容过长 - 图片没设
max-width: 100%，原始尺寸大于格子 - 父容器有
padding但没算进box-sizing，尤其用了border-box以外的值 - Grid 容器本身被套在
overflow: hidden外层，掩盖了真实溢出位置，调试时先临时移除外层限制
快速定位：在 DevTools 里选中 Grid 容器，勾选「Layout」面板中的「Show grid line numbers」和「Highlight grid tracks」，再拖动窗口观察哪条轨道突然变宽或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
