固定像素列溢出主因是子项盒模型开销未被轨道计算，应改用auto+1fr组合并约束子项文本换行与图片尺寸。
直接改 grid-template-columns 很难治溢出，真正撑破列宽的不是轨道定义，而是子项盒模型（margin、padding、border）和内容行为没被约束。
为什么固定像素列 + margin 会溢出
比如写 grid-template-columns: auto 50px auto，中间列标称 50px，但子项有 margin: 5px，左右共占 10px，实际内容可用宽度只剩 40px。一旦文本自然宽度超 40px（尤其默认 white-space: normal 下单个长单词），就会顶破边框、挤占邻列。
- 这不是
auto轨道的问题，是盒模型开销没被计入轨道分配 -
50px是轨道“名义宽度”，不等于子项“可用内容区” - 浏览器不会自动从
50px里扣掉margin，它只管按你写的轨道分空间
用 1fr auto 1fr 替代 auto 50px auto
auto 轨道在弹性上下文中才真正自适应：它会把子项的完整盒模型（含 margin、padding、border）都算进去，再决定最终列宽。
- 两侧
1fr平分剩余空间，不抢中间列的“生存权” - 中间
auto列宽度 = 最宽子项的offsetWidth（渲染后总宽），天然包容margin - 不用手动算 50px − 10px，浏览器动态算，响应式也稳
必须同步约束子项自身行为
光调 grid-template-columns 不够。网格容器只分地，不管盖房——子项得自己守规矩：
- 对含文本的项，加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap（单行）或word-break: break-word（多行） - 避免写
minmax(auto, 1fr)，它等价于1fr，遇长文本仍会撑开；改用minmax(0, 1fr) - 图片类子项必须加
width: 100%+height: 100%+object-fit: cover，否则auto轨道也会被原始尺寸拉爆
调试时优先看 computed styles 而不是代码
DevTools 里点开 grid 容器的 grid-template-columns，展开看浏览器**实际计算出几列、每列多少 px**。常发现：你以为写了 repeat(auto-fit, minmax(200px, 1fr))) 就该有 4 列，结果只生成了 2 列——因为最小值 200px 卡住了，剩下内容全堆在第 3 列里，视觉上就是“溢出”。这时候调 grid-template-columns 没用，得去查子项是否漏了 min-width: 0 或 overflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
