display: inline-grid 会让容器宽度“锁死”是因为它使容器表现为内联元素，宽度仅包裹内容，不响应 width: 100% 或 grid-template-columns: 1fr 等声明，其宽度计算逻辑与 inline-block 一致，不参与块级流的宽度分配。
为什么 display: inline-grid 会让容器宽度“锁死”
Grid 容器不随子项内容撑开，最隐蔽的原因之一就是用了 display: inline-grid。它会让容器表现得像一个内联元素（类似 span），宽度只包裹内容，无视子项的总宽度或 width: 100% 声明。
典型现象：明明子项加了 width: 100% 或设置了 grid-template-columns: 1fr，但整个网格区域却窄得只够放一个字；用开发者工具看，容器 computed width 小得离谱，且 display 确实是 inline-grid。
这不是 bug，是规范行为 —— inline-grid 的宽度计算逻辑和 inline-block 一致，天生不参与块级流的宽度分配。
如何快速验证是不是 inline-grid 搞的鬼
打开浏览器开发者工具，选中 Grid 容器，在 Styles 面板里检查 display 值。如果看到的是 inline-grid，而不是 grid，那基本就是它了。
- 临时改写为
display: grid，观察容器是否立刻按预期撑开 - 若父容器是 flex 或 grid，
inline-grid还可能触发额外收缩（比如被flex-shrink: 1拉窄） - 注意：某些 CSS 重置库或框架（如早期 Tailwind 版本）可能默认设了
inline-grid，需手动覆盖
inline-grid 什么时候该用、什么时候必须换
inline-grid 本身合法且有用，但适用场景非常明确：仅当你需要网格像文字一样“嵌入行内流”，且宽度由内容决定时才用。绝大多数布局需求其实要的是块级行为。
- ✅ 适合：
inline-grid用于小图标网格、内联操作按钮组、行内工具条等“不打断段落”的微布局 - ❌ 必须换：
display: grid用于主内容区、卡片列表、表单布局、全宽响应式模块等任何需要宽度自适应或占满父容器的场景 - ⚠️ 注意：
inline-grid不支持width: 100%生效（除非父级是 inline 元素并设了width），也不响应fit-content外的宽度声明
换完 display: grid 还不撑开？继续查这两处
换成 display: grid 后若仍不撑开，说明问题已转移到 Grid 内部机制，此时应立即排查：
- 父容器是否设置了
width: 0、min-width: 0或overflow: hidden，压制了伸缩 - 子项是否带
min-width: auto（默认值），导致长文本/图片撑开列 —— 此时需加min-width: 0到子项 - 是否误用了
grid-template-columns: auto或max-content，它们都依赖内容固有尺寸而非容器约束
真正卡住宽度的，往往不是 display 类型本身，而是它和父级约束、子项最小宽度之间的连锁反应。先确认 display 是 grid，再往下深挖，能省掉一半调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
