Grid容器的max-width失效主因是父容器为flex/grid且未设width，致子项无约束；须配合width:100%或inline-size:100%生效，fr单位还受min-content限制，需设min-width:0或minmax(0,1fr)。
Grid容器的max-width为什么有时不生效
直接在 Grid 容器上设 max-width 通常能起作用，但常见失效场景是：父容器用了 display: flex 或 display: grid 且未设置 width / inline-size，导致子项（即你的 Grid 容器）按内容撑开，max-width 被忽略。本质是 Grid 容器成了「无约束的弹性子项」。
验证方法：给 Grid 容器加 border 和 background，再检查其实际渲染宽度是否超出预期。
必须配合width: 100%或inline-size: 100%
在 Flex 或 Grid 父容器中，Grid 子容器需显式声明尺寸约束，否则 max-width 不触发限制逻辑。
-
width: 100%最常用，兼容性好 -
inline-size: 100%是逻辑属性写法，更语义化（尤其支持 RTL 布局） - 避免只写
max-width单独存在——它不是“自动收缩”的开关，而是“最大允许宽度”的上限
示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 1200px;
width: 100%; /* 关键：提供基准尺寸 */
margin: 0 auto;
}
注意grid-template-columns中的fr单位影响
fr 单位会基于**可用空间**分配，而可用空间由 width + max-width 共同决定。如果 max-width 生效了，但列宽仍超预期，大概率是 fr 在压缩过程中优先满足内容最小宽度（min-content）。
解决办法：
- 给网格项加
min-width: 0（防止文本/图片强制撑宽） - 用
minmax(0, 1fr)替代1fr，显式允许收缩到零 - 避免在
grid-template-columns中混用固定值（如300px）和fr，除非你明确需要这种刚性比例
响应式下max-width与container查询的取舍
CSS @container 查询目前仍依赖容器查询 polyfill 或较新浏览器支持（Chrome 105+），实际项目中不如媒体查询稳定。若只需限制整体宽度，坚持用 max-width + width: 100% + @media 更可靠。
典型响应式写法：
.grid-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
<p>@media (max-width: 768px) {
.grid-container {
max-width: 100%;
padding: 0 16px;
}
}</p>
注意：不要在媒体查询里只改 max-width 而漏掉 width: 100%，否则小屏下可能回退为内容宽度。
真正容易被忽略的是 min-width 对网格项的影响——哪怕容器缩窄了，单个格子仍可能因图片、长单词或 white-space: nowrap 拒绝收缩，进而撑破整个 max-width 边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
