grid容器宽度不随子项撑开是因为其块级盒模型默认行为，而inline-grid通过改为内联级盒子天然包裹子项总宽，无需fit-content且兼容性更好，但需注意基线对齐和脱离文档流干扰。
grid容器宽度不随子项撑开，是因为它仍是块级元素
默认 display: grid 的容器是块级盒子，宽度自动占满父容器（width: 100%），高度则按内容塌陷——但这个“内容”仅指显式参与布局的子项，且不考虑 grid-auto-flow: column 下横向累积的总宽度。所以当你有一排日期卡片横向滚动时，容器并不会变宽，背景和边框就只显示在初始可视区宽度内。
用 inline-grid 是最直接的解法
inline-grid 让容器变成内联级盒子，行为类似 inline-block：宽高都由子项真实尺寸 + gap + 行内基线等共同决定，天然“包裹内容”。它不需要额外写 width: fit-content，也不依赖现代浏览器对 fit-content 的支持。
- 适用于固定宽子项、已知数量或简单流式横向排列场景（如日历头部、标签导航条）
- 若子项含文本或图片等弹性内容，建议加
min-width: 0防止过度收缩 - 注意父容器若为
text-align: center，可用margin: 0 auto居中（需父容器有明确宽度或设为inline-block） - 不适用于需要响应式列数变化的场景（比如
auto-fit+minmax()），因为inline-grid不触发轨道重计算逻辑
为什么不用 width: fit-content 而选 inline-grid？
width: fit-content 确实有效，但它本质是显式覆盖宽度计算逻辑，而 inline-grid 是从盒模型层级改变行为，更轻量、语义更准。不过要注意：
-
inline-grid容器会受行内格式化上下文影响，比如与相邻文字对齐可能产生意外间隙（基线对齐），可加vertical-align: top消除 - 若容器内有
align-items: stretch且子项无明确高度，某些浏览器下仍可能轻微撑高容器（尤其 Safari 15.4 之前） - 不能和
justify-content: center同时生效来居中子项——inline-grid的主轴对齐由父容器控制，子项居中得靠margin: 0 auto或text-align
别忽略子项脱离文档流带来的干扰
如果子项用了 position: absolute 或 float，它们会脱离网格布局流，inline-grid 也无法感知其尺寸。此时容器仍会塌陷。
- 确保子项保持正常文档流位置（即不设
position: absolute/fixed） - 避免在子项上写
width: 100%且父容器无明确宽度，这会导致子项宽度计算失败 - 当子项含图片时，记得设
img { max-width: 100%; height: auto; }，否则可能撑破容器或破坏自适应逻辑
真正卡住人的往往不是语法，而是没意识到 inline-grid 改变的是盒类型，不是仅仅换了个 display 值；它让整个容器退回到“像按钮一样自然撑开”的原始逻辑，反而比各种 fit-content + minmax() 组合更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
