fit-content() 在 grid 中不能单独使用，必须嵌套在 minmax(0, fit-content()) 中才生效；否则浏览器静默忽略，列宽退化为 auto 或 min-content。
直接说结论：fit-content() 在 Grid 中不能单独用，必须套在 minmax(0, fit-content()) 里才真正生效；否则浏览器会静默忽略，列宽退化为不可控的 auto 或 min-content。
为什么 grid-template-columns: fit-content(200px) 总是没反应
这不是你写错了，而是规范层面的限制：fit-content() 本身不是 Grid 轨道尺寸的合法关键字。Chrome、Edge（v117 前）、Safari 都会把它当无效值处理，DevTools 里常显示为划掉状态。
- 常见错误现象：
grid-template-columns: fit-content(200px) 1fr写完，第一列却撑满整行或缩成一条线 - 根本原因：浏览器回退到隐式
minmax(min-content, max-content)行为，而该行为严重依赖子元素是否换行、是否有长单词、是否设了white-space - 修复动作：把
fit-content(200px)改成minmax(0, fit-content(200px))—— 这个0是关键，它允许轨道在内容为空或换行后安全收缩，不被min-content拉扯
fit-content(200px) 实际怎么算宽度
它不是“尽量窄”，而是明确的数学表达式：min(max-content, max(min-content, 200px))。也就是说，最终宽度取「内容不换行时的总宽」和「200px」中的较小值，但不会比「单个单词/字符的最小可占宽度」还小。
- 若子元素是
<div>Hello</div>，且没设white-space: nowrap，min-content可能趋近于 0，此时列宽由minmax(0, ...)的下限决定，容易过窄 - 若子元素含长 URL 或未折行中文，
max-content极大，fit-content(200px)就真能卡住——但前提是子元素已设word-break: break-all或overflow-wrap: break-word，否则浏览器按原字符串长度计算，溢出就溢出了 -
fit-content(50%)无效：Grid 轨道中百分比参数被忽略，必须用像素、ch、em等绝对单位
多列都自适应时怎么写才不出错
别用 repeat(3, fit-content(200px))，它和单列一样无效。正确写法必须每一层都包裹 minmax()：
.grid {
display: grid;
grid-template-columns: minmax(0, fit-content(200px)) minmax(0, fit-content(200px)) minmax(0, fit-content(200px));
}
- 更简洁的等价写法：
repeat(3, minmax(0, fit-content(200px))) - 如果希望列有最小保底（比如至少 120px），改用：
minmax(120px, fit-content(200px)) - 注意 Firefox 117+、Chrome/Edge 117+ 才完整支持该语法；旧版本需降级为
max-content+ 外层max-width控制
什么时候该放弃 fit-content 改用其他方案
当你发现列宽卡在某个奇怪数值、反复调试 white-space 和 word-break 仍不理想时，说明内容测量机制已被干扰——这时候硬扛不如换路子。
- 只要单个子项（非整列）要自适应：不用动
grid-template-columns，给那个子项加justify-self: start和width: fit-content更直接 - 内容全是短文本+图标，且不允许换行：用
max-content更诚实，但它没有上限保护，得靠父容器max-width补刀 - 富文本、用户输入、带图片的卡片：CSS 往往不够用，用 JS 读取
offsetWidth后动态设置grid-template-columns反而更稳——这在真实项目里比想象中常见
最易被忽略的一点：fit-content 的“内容”指的是子元素的固有尺寸，不是你肉眼看到的渲染结果。一旦子元素用了 width: 100%、flex: 1 或 display: table-cell，它的固有尺寸就被覆盖了，fit-content 就彻底失去依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
