Grid容器宽度被锁死的主因是浏览器默认min-width: auto，需显式设min-width: 0（横向）或min-height: 0（纵向）解除；同时需检查display是否误用inline-grid、子项是否含固有尺寸、父级是否抑制伸缩。
Grid容器被min-width: auto锁死宽度
不是你没写width: 100%，而是浏览器给Grid容器（以及所有Flex/Grid子项）默认加了min-width: auto——它会强制容器至少撑开到内容固有宽度，哪怕父容器再窄、flex: 1再用力，也缩不过去。
典型现象：Grid容器在Flex父级里“纹丝不动”，开发者工具里computed min-width显示auto；或子项含长文本、图片时，整列被撑爆，1fr完全失效。
- 必须显式写
min-width: 0（横向布局）或min-height: 0（纵向），才能解除这个隐形锁 - 如果Grid容器本身是Flex子项，且用了
flex: 1，min-width: 0不能省 - 若Grid内部还有Flex子项（比如按钮组、文字块），那些子项同样要检查是否被
min-width: auto卡住
display: inline-grid让容器变成“内联盒子”
inline-grid不是bug，是行为正确但用错了场景。它让Grid容器表现得像span，宽度只包裹内容，不响应width: 100%、grid-template-columns: 1fr，甚至会被父级flex-shrink: 1进一步压缩。
验证方式：开发者工具里看Grid容器的display值，如果是inline-grid，基本就是它了。临时改成display: grid，立刻就能看出宽度是否恢复正常。
立即学习“前端免费学习笔记（深入）”；
- ✅ 适合：
inline-grid用于图标网格、行内操作按钮组等“嵌入段落”的微布局 - ❌ 必须换：
display: grid用于主内容区、卡片列表、表单等需要占满父容器的场景 - ⚠️ 注意：某些CSS重置库或旧版框架（如Tailwind v2.x）可能默认设了
inline-grid，需手动覆盖
子项自身尺寸破坏Grid轨道计算
即使容器display和min-width都对了，子项自己“不守规矩”，Grid照样算不准宽度。比如子项写了width: 300px、white-space: nowrap或min-width: 400px，就会强行撑开所在列，导致其他1fr列被压缩甚至换行。
- 子项应设
min-width: 0（防长文本/图片撑破） - 图片/视频加
max-width: 100%; height: auto; - 文本容器建议加
overflow-wrap: break-word或text-overflow: ellipsis - 避免在子项上写死
flex-basis、width等覆盖Grid分配逻辑的样式
width: fit-content不是万能解药
当Grid用grid-auto-flow: column横向排列时，width: fit-content确实能让容器宽度等于所有子项总宽+gap——但它只在父容器允许伸展的前提下生效。如果父级设了width: 0、min-width: 0或overflow: hidden，fit-content就直接失效。
- 确保父容器没有抑制伸缩的属性
- 不要同时写
width: 100%或flex-grow: 1，它们会覆盖fit-content -
fit-content在Chrome 65+/Firefox 63+/Safari 14.1+支持良好，但IE完全不支持 - 注意：
grid-template-columns: fit-content(200px)是无效写法，Grid轨道不认这个值；真要自适应列宽，得用minmax(0, fit-content(200px))
min-width: auto、inline-grid、子项固有尺寸、父级约束这四者叠在一起的连锁反应。改一处可能没用，得按顺序排查。 
