先记住这个答案
看到内容越出格子，不能立刻断定轨道被撑大。auto、带自动最小值的 1fr 等轨道可能接受项目的最小尺寸贡献，最终轨道确实变宽；明确写了固定宽度的轨道则不必然扩张，内容可能直接画到相邻格子或容器外。用开发工具的 Grid 轨道高亮先确认线的位置，再看项目和子元素的边界。
- 自动最小轨道可能被内容撑宽
- 固定轨道不会无条件跟着内容变宽
- 项目盒与内部内容都可能溢出
overflow控制绘制，不等于改变轨道尺寸
固定轨道与弹性轨道的差别
把一张 400px 宽图片放进 200px 的固定列，如果没有最大宽度限制，它仍可能以 400px 绘制，盖住旁边。列线之间还是 200px。把该列换为常见的 1fr 后，自动最小约束可能让轨道本身变宽，整页布局跟着扩大。两种页面看起来都“超宽”，修法却不一样。
.grid {
display: grid;
grid-template-columns: 200px 200px;
gap: 16px;
}
.grid img { width: 400px; }
/* 第一列仍是 200px，图片可越过自己的轨道 */如果设计需要图片适应卡片，可给它 max-width: 100%，并让高度自动计算。若需求是展示原图，可以在项目内部设置受控的水平滚动。给容器随手加 overflow: hidden 虽能遮住越界内容，却可能同时剪掉阴影和菜单，不能替代找到原因。
轨道、项目、内容逐层看
先看 grid-template-columns 的轨道尺寸函数。minmax(0, 1fr) 允许轨道收缩，minmax(auto, 1fr) 则保留自动最小下限。再看网格项目的 min-width、justify-self 与是否跨列；最后检查内部图片、代码块和文字是否能缩放或断行。
当项目设置 overflow: auto 或 overflow: hidden，绘制和自动最小尺寸可能一起变化，但这不是“Grid 自动裁剪”的默认行为。默认 overflow: visible 时，越界内容通常仍可见。修布局时要明确产品想要的是换行、滚动还是裁剪。
一个判断方法是先在开发者工具中看网格线有没有移动。若 minmax(0, 1fr) 的列线仍在容器内部，只有图片跑出格子，问题是项目或内容溢出；若列线整体被推宽，先检查轨道的自动下限和项目的最小尺寸贡献。给图片 max-width: 100% 只约束图片自身，不一定能解除轨道被其他不可断文本撑大的问题。
容易答错的地方
- 说 Grid 一定会把轨道撑到内容宽
- 固定轨道可以保持声明尺寸，内容单独越界；自动轨道才需要看尺寸贡献。
- 说写了
minmax(0, 1fr)内容就不会挡住邻格 - 它只让轨道可缩，宽图或长串仍可能绘制到邻格。内容要单独约束。
面试官还会怎么问？
怎么确认是轨道变宽还是内容越界？
用浏览器 Grid 高亮看列线距离，再用盒模型面板看项目和子内容宽度。
固定行高碰到高内容会怎样？
和固定列类似，行轨不必跟着内容增长；内容可能越出区域，需要处理滚动或裁剪。
网格项跨两列时由谁承担最小宽度？
它的尺寸贡献参与跨越轨道的尺寸计算，具体分配要结合这些轨道的大小函数。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。