子模块尺寸失控主因是minmax()边界设置不当；应避免用0或auto作最小值，改用明确像素、min-content或min(200px,100%)等可控值，并配合overflow-wrap、max-width等防撑爆，嵌套Grid需双重校准。
子模块尺寸失控，根本原因常是没给 minmax() 设好边界。光写 minmax(0, 1fr) 或 minmax(auto, 1fr) 很容易让浏览器“自由发挥”，结果内容撑开、折叠异常、响应错乱。
别用 0 或 auto 当 min 值
minmax(0, 1fr) 的 0 没实际约束力——文本、图片、内边距都会突破它；minmax(auto, 1fr) 的 auto 又依赖内容，可能比容器还宽。真正可控的最小值应是明确像素或内联尺寸（如 min-content、max-content），或带弹性兜底的 minmax(min(200px, 100%), 1fr)。
- 固定最小：用
minmax(200px, 1fr)保主体不塌缩 - 内容自适应：用
minmax(min-content, 1fr)让文字/按钮自然伸展但不溢出 - 响应友好：用
minmax(min(250px, 100%), 1fr)在小屏下优先保宽度，大屏放开
max 值不是“越大越好”，要防撑爆
写 1fr 当 max 看似安全，但若父容器没设 max-width 或未限制子项内容（比如长单词、未换行的 URL），依然会突破布局。此时需组合控制：
- 加
overflow-wrap: break-word或word-break: break-word防文本溢出 - 对图片/iframe 加
max-width: 100%; height: auto - 用
minmax(min(200px, 100%), min(600px, 1fr))明确上限，避免无节制拉伸
嵌套 Grid 中，子模块的 minmax 要“双重校准”
外层 grid 定义轨道，内层 grid 又用 minmax，容易形成叠加放大的不确定性。建议：
立即学习“前端免费学习笔记（深入）”；
- 外层用明确基准（如
minmax(300px, 1fr)），内层改用fit-content(400px)或固定minmax(200px, 400px) - 在关键子模块上加
align-self: start或justify-self: stretch主动干预对齐行为 - 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))))替代手写多列，让浏览器自动裁剪而非硬塞
调试时盯住 computed width 和 min/max-width
Chrome DevTools 的 Layout 面板里，展开元素的 “Computed” 标签，重点看 width、min-width、max-width 三行数值。如果 min-width 显示为 auto 或远超预期，说明 minmax 的 min 没生效；如果 width 固定在某个大值且无法收缩，大概率是 max 缺少硬性约束或内容未截断。
不复杂但容易忽略。
