Grid子项最大宽度需直接控制子项本身：设max-width、width:100%、box-sizing:border-box，并处理长文本和嵌套限制。
Grid子项的最大宽度不能靠grid-template-columns硬卡
很多人试图在grid-template-columns里用minmax(0, 400px)或fit-content(400px)来“限制每个子项宽度”，但这是误解：这些函数只约束**列轨道的分配逻辑**，不阻止子项自身内容（比如长文本、未设max-width的图片）撑破轨道。子项仍可能溢出，甚至拖垮整个容器。
真正起效的方式是直接控制子项本身：
- 给子项加
max-width: 400px，再配width: 100%和box-sizing: border-box - 若子项是
<img alt="CSS Grid布局中如何限制子容器的最大宽度？" >，必须额外加max-width: 100%; height: auto，否则固有尺寸优先级更高 - 遇到长单词或URL，补上
word-break: break-word或overflow-wrap: break-word
为什么grid-column-start / end不能当宽度限制用
grid-column: 1 / 3这类声明只是把子项**放置在指定列范围内**，并不绑定其渲染宽度。如果子项内部有width: 100vw或未约束的display: inline-block元素，它照样会突破轨道边界，甚至导致父容器被撑开——尤其是当父容器没设max-width时。
典型表现：
立即学习“前端免费学习笔记（深入）”；
- 开发者工具里看到子项“占了两列”，但实际渲染宽度远超两列总宽
- 滚动条意外出现，或右侧内容被裁剪
-
grid-template-columns: repeat(3, 1fr)下，某子项却宽得像占满整行
根本原因：Grid轨道是“定位栅格”，不是“强制裁剪框”。子项宽高由自身盒模型决定，轨道只提供坐标参考。
子项内容撑破Grid容器？先查min-width和white-space
即使你给Grid容器写了max-width: 1200px，它仍可能被子项撑大——这不是bug，而是CSS默认行为：块级容器会扩张以容纳**不可折行的长内容**。
关键检查点：
- 子项是否隐式继承了
min-width: auto（浏览器默认值），导致无法收缩？可显式设min-width: 0 - 子项内文本是否用了
white-space: nowrap，或包含无连字符的长串（如base64、哈希值）？ - 子项是否是
display: flex或inline-block，而父Grid项没设width: 100%？
修复示例：
.grid-item {
min-width: 0;
width: 100%;
}
.grid-item p {
overflow-wrap: break-word;
}
嵌套Grid时，max-width层级容易互相干扰
常见错误：外层用Bootstrap的.container（max-width: 992px），内层Grid又写max-width: 1200px——结果后者完全无效，因为父容器已把可用宽度锁死在992px。
调试方法：
- 打开开发者工具，选中Grid容器，看Computed面板里的
max-width是否为992px而非1200px - 若需解除外层限制，给Grid容器加
max-width: none或max-width: unset - 更稳妥的做法：放弃内层
max-width，改用width: clamp(320px, 95vw, 1200px)，让宽度随视口弹性变化
真正难处理的从来不是怎么写CSS，而是哪一层该管宽度、哪一层该管布局——错一层，整个响应式就失准。
