fit-content() 必须嵌套在 minmax(0, fit-content()) 中才生效，直接使用会被浏览器静默丢弃；正确写法是 minmax(0, fit-content(120px))，且需注意浏览器兼容性及 0 下限对空内容和换行的控制作用。
fit-content() 必须嵌套在 minmax(0, ...) 中才生效
直接写 grid-template-columns: fit-content(120px) 或 repeat(auto-fit, fit-content(120px)) 不会起作用——浏览器把它当非法值静默丢弃，DevTools 里该声明会被划掉，列宽退化为不可控的 auto 或 min-content。真正能用的写法只有 minmax(0, fit-content(120px))，且这个组合从 Chrome/Edge v117+、Firefox 较早版本开始支持，Safari 则要 iOS 17.4 / macOS 14.4 才完整兼容。
关键点在于 0 这个下限：没有它，空标签或换行文本可能触发 min-content 行为，导致列意外拉宽；有了它，才能确保“内容多就撑开、内容少就收缩、空着就缩到零”。
标签栏场景下别用 grid-template-columns 控制单个标签宽度
如果你只是想让每个标签（如 <button></button> 或 <span></span>）按自身文字宽度收缩，而不是整列都跟着变，那就别动网格轨道定义。直接对子项设：
button {
justify-self: start;
width: fit-content;
}
这样更稳妥，原因有三：
-
width: fit-content在所有现代浏览器中稳定支持（包括旧版 Safari），无兼容性风险 - 避开 Grid 轨道尺寸计算的干扰（比如父级未设宽、子项有
flex: 1或width: 100%） - 避免与
grid-column跨列声明冲突，防止布局错位
内容换行或长文本会破坏 fit-content 效果
Grid 的 fit-content() 是基于“内容最大内联尺寸”计算的。如果标签里有长英文、URL 或未加约束的中文段落，浏览器默认会换行，导致 min-content 接近于 0，最终列宽塌陷或行为异常。
解决办法是显式控制内容暴露方式：
- 加
white-space: nowrap防止换行（适合短标签，如 “编辑”、“删除”） - 加
overflow-wrap: break-word或word-break: break-all允许断词（适合带 URL 或长 ID 的标签） - 搭配
max-width: 100%防止溢出容器
auto-fit + fit-content(100%) 是动态列数的安全组合
当标签数量不确定、需要自动排列时，推荐：
.tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, fit-content(100%)));
gap: 0.5rem;
}
注意：fit-content(100%) 不等于占满容器，而是取「内容最大宽度」和「父容器可用宽度」二者较小值——这恰好适合标签栏：内容短就紧凑，内容长也不溢出。
但得提醒一句：这个写法在旧版 Chrome（v117 之前）仍会 fallback，如果项目必须支持这些环境，要么降级用 max-content + overflow: hidden 截断，要么加 JS 检测并注入 fallback 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
