fit-content() 不能直接用于 grid-template-columns，必须用 minmax(0, fit-content()) 包裹才有效；否则浏览器静默丢弃，导致列宽不可控跳动。
fit-content() 在 grid-template-columns 中根本不会生效
直接说结论：fit-content() 作为 grid-template-columns 或 grid-template-rows 的独立取值，**不是 CSS Grid 规范定义的合法轨道尺寸**。Chrome、Edge（v117 前）、Safari 等主流浏览器会静默丢弃该声明，DevTools 里显示为划掉的 “invalid value”，然后回退到隐式行为（通常是 minmax(min-content, max-content)），结果不可控——视觉上就是列宽忽大忽小、内容一变就跳动。
- 写了
grid-template-columns: fit-content(200px)，子项却撑满整行 - 按钮文字从“提交”变成“确认提交并同步至云端”时，列宽突变，相邻项被挤压或拉伸
- 图片宽度变化后，Grid 项不跟随收缩，反而留白或溢出
真正起作用的是 minmax(0, fit-content())
fit-content() 本身是 width/height 属性的函数，不是 Grid 轨道的原生尺寸关键字。想让它在 Grid 中工作，必须用 minmax() 包裹：
grid-template-columns: minmax(0, fit-content(250px));
这个写法的含义是：“这列最小可缩到 0（避免空内容或换行导致网格崩溃），最大不超过 fit-content(250px)”，而 fit-content(250px) 等价于 minmax(min-content, 250px)。
- 单独写
fit-content(300px)不会“每项自适应”，而是整列统一上限 - 想让每项都贴合自身内容（比如不同宽的图片），要用
repeat(auto-fit, fit-content(300px)) -
minmax(fit-content(200px), 1fr)是无效语法，会退化为minmax(0, 1fr)
IE 和旧 Safari 不支持，线上项目需谨慎
Safari 直到 15.4 才稳定支持 fit-content()，IE 完全不支持。如果项目需兼容旧版 Safari 或企业内网环境，别依赖它做核心布局逻辑。
- 可用
@supports (grid-template-columns: minmax(0, fit-content(100px)))做特性检测降级 - 降级方案推荐：用
minmax(0, 1fr)+min-width: 0+overflow-wrap: break-word组合保底 - 图片场景优先用
width: 100%; height: auto;+aspect-ratio，比靠fit-content()更可控
列宽跳动还可能是 min-content 阻塞了 1fr 收缩
即使你用了 minmax(0, fit-content())，如果 Grid 项里有长单词、未约束的图片或 flex 子项，1fr 默认下限仍是 min-content，浏览器宁可撑开列也不截断内容——结果就是列宽随文本长度剧烈波动。
- 必须给 Grid 项加
min-width: 0，否则minmax(0, ...)的 0 就不起作用 - 中文场景特别危险：
min-content是“最长不可折片段”，URL 或连续英文单词会让列宽突然暴涨 - 用开发者工具检查 Computed →
min-width，确认是否被继承的auto覆盖
容易被忽略的关键点：浏览器对 minmax(0, fit-content()) 的解析是分步的——先算 fit-content() 的结果，再和 0 取极值。如果子项内容为空或含 display: none 元素，fit-content() 可能返回 0，整列就塌了。这不是 bug，是规范行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
