fit-content() 必须带长度或百分比参数才合法，如 fit-content(200px)；其含义是取内容最大内联尺寸与参数值的较小者；单独使用、用于 grid-auto-columns 或 flexbox 均无效。
fit-content() 必须带参数，单独写无效
直接写 grid-template-columns: fit-content; 不会生效——浏览器当它是非法值直接丢弃，回退到默认行为（通常是 auto 或 minmax(min-content, max-content)），但结果不可控。你看到的“没反应”，其实是被静默忽略。
它必须带一个长度或百分比参数：fit-content(200px)、fit-content(30%) 才算合法。含义是：轨道宽度取「内容最大内联尺寸」和「该参数值」二者中的较小者。
- 内容短（比如 “OK” 按钮），列宽就等于文字宽度
- 内容长（比如一串无空格英文），列宽会被卡在
200px不再增长 - 不支持
fit-content无参调用，也不支持用于grid-auto-columns或 Flexbox
Chrome/Edge 旧版本不支持 minmax(0, fit-content())
想让列真正“按内容收缩又不崩”，得套一层 minmax(0, fit-content(200px))。但注意：minmax(0, fit-content(200px)) 在 Chrome/Edge v117 之前是被忽略的，只有 Firefox 原生支持；v117+ 才开始兼容。
如果你要兼容旧版 Chrome，要么降级用 max-content（不设上限），要么加 JS 检测 fallback。
-
0是关键：没有它，空内容或换行文本可能触发min-content行为，导致意外拉伸 - 别写
repeat(3, fit-content(200px))—— 同样无效，得写成repeat(3, minmax(0, fit-content(200px))) - Firefox 一直支持，但 Safari 直到 iOS 17.4 / macOS 14.4 才完整支持
minmax(0, fit-content())
单个子项自适应？别动 grid-template-columns
如果只是某个 Grid 子项（比如按钮、标签）想按内容缩放，而不是整列都跟着变，那就别折腾列定义。直接用 justify-self + width: fit-content 更稳妥：
button {
justify-self: start;
width: fit-content;
}
这样既避开 Grid 轨道尺寸的兼容性坑，又精准控制单个元素。Grid 的 fit-content() 是为轨道设计的，不是给子项用的 width 属性替代品。
-
width: fit-content在所有现代浏览器中稳定支持（包括旧版 Safari） - 配合
white-space: nowrap或word-break: break-word可控溢出行为 - 避免在子项上同时设
width: fit-content和grid-column跨列，容易冲突
fit-content(100%) 不等于 100% 宽度
写 fit-content(100%) 并不是让列占满容器，而是取「内容最大宽度」和「父容器内联尺寸 100%」中的较小值。实际效果往往接近 max-content，但受父容器宽度约束，比纯 max-content 更安全。
常见误判场景：父容器没设 width、子元素有 white-space: nowrap、或内容含超长无空格字符串，都会让 fit-content(400px) 直接顶到 400px，看起来像“卡死”了。
- 测试时先给父容器加
border和width: 600px，排除容器尺寸干扰 - 长文本建议搭配
overflow-wrap: break-word，否则fit-content无法干预强制换行 -
fit-content(30%)的百分比是相对于网格容器内联尺寸（即 width），不是相对于视口
minmax()、有没有考虑目标浏览器的实际支持程度。漏掉任何一个，fit-content() 就只是 CSS 文件里一行安静的注释。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
