fit-content(200px) 单独使用无效，必须包裹为 minmax(0, fit-content(200px)) 才被广泛支持；其宽度取内容自然宽与200px的较小值，但受子元素样式（如换行、长单词、width:100%等）显著影响。
直接写fit-content(200px)会失效
浏览器根本不会认这个值——它不是 Grid 规范定义的合法轨道尺寸。你写 grid-template-columns: fit-content(200px) 1fr，Chrome 或 Edge（v116 及更早）会直接忽略该声明，回退到默认行为；DevTools 里这条规则会被划掉，但不报错，容易误以为“写了等于生效”。Firefox 虽然支持得早些，但行为也不完全一致。
真正被广泛支持的写法是套一层 minmax()：
-
minmax(0, fit-content(200px))是当前最稳妥的写法 -
0很关键：没有它，空内容或换行文本可能触发min-content回退逻辑，导致列意外撑开 - 别写
minmax(min-content, fit-content(200px))——这等于套娃，语义混乱且无必要
fit-content() 的宽度到底怎么算
它不是“内容多宽就多宽”，而是取两个值中的较小者：内容自然宽度 和 你传入的上限值（比如 200px）。但这个“内容自然宽度”受子元素自身样式强烈干扰：
- 子元素若设了
white-space: normal（默认），换行后min-content可能趋近于0，fit-content(200px)就失去意义 - 子元素含长单词（如 URL、邮箱）且没设
word-break: break-word或overflow-wrap: break-word，浏览器会按整词计算宽度，常远超预期 - 子元素用了
width: 100%、flex: 1或display: flex，会强制拉伸，覆盖fit-content()的收缩意图 - 图片没加
max-width: 100%，可能直接溢出列宽
多列动态适配时别用 repeat(auto-fit, fit-content(200px))
这个写法看着很诱人，但实际无效——fit-content() 单独出现在 repeat() 内部仍不被解析为合法轨道尺寸。必须显式包裹：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
repeat(auto-fit, minmax(0, fit-content(200px))) - ❌ 无效：
repeat(auto-fit, fit-content(200px))（浏览器丢弃整条声明） - ❌ 错误：
repeat(auto-fit, minmax(min-content, 200px))（这不是fit-content()，它不响应内容变化，只是硬性限制）
另外注意：auto-fit 和 auto-fill 在这里行为不同：auto-fit 会把空轨道折叠，auto-fill 则保留占位，影响最终列数和间隙分布。
兼容性差时的降级方案
如果你必须支持 Chrome v116 以下或 Safari（至今未实现 minmax(0, fit-content())），靠纯 CSS 几乎无法可靠还原相同效果：
- 用
max-content替代：列宽 = 最宽子项内容宽度，但无上限保护，易撑爆容器 - 用
minmax(min-content, 200px)：列宽至少为最窄内容宽度，最多 200px，但“最小”部分常比你预期的宽（因浏览器对min-content测量保守） - JS 动态测量：读取每个子项的
offsetWidth，取最大值后设为grid-template-columns，适合内容静态或更新不频繁的场景
真正难的不是写出 minmax(0, fit-content(200px)) 这一行，而是确认子元素是否处于可测状态——有没有 transform 干扰 layout、是否在 display: contents 容器里、祖先是否设了 overflow: hidden 截断测量……漏掉任一细节，宽度就偏了。
