fit-content() 必须带长度或百分比参数才生效，如 fit-content(200px)，表示取内容宽度与参数的较小值；不可无参使用，不支持嵌套于minmax()，整列设限需配合repeat(auto-fit, ...)，单元素自适应应改用width: fit-content。
fit-content() 必须带参数才生效
直接写 grid-template-columns: fit-content; 会被浏览器静默忽略，退回到默认行为（通常是 minmax(min-content, max-content)），结果不可控。它只接受一个 <length></length> 或 <percentage></percentage> 参数，例如 fit-content(200px) 或 fit-content(30%)。
含义是：该轨道宽度取「内容最大内联尺寸」和「参数值」二者中的较小者。
- 内容短（如 “提交” 按钮），列宽 ≈ 文字宽度 + padding
- 内容长（如一串无空格英文），列宽被卡在 200px 不再增长
- 不支持无参调用，也不支持用于
grid-auto-columns或 Flexbox
想让每项按图/文本真实宽度排布，用 repeat(auto-fit, ...)
写 grid-template-columns: fit-content(300px); 是整列统一设限，不是“每张图自适应”。要实现紧凑又不重叠的自动列生成，必须套 repeat(auto-fit, ...)：
grid-template-columns: repeat(auto-fit, fit-content(300px));
- 每个网格项独立计算自身宽度，上限为 300px
- 若某张图实际宽 180px，该项就约 180px + 内边距，不会强行拉到 300px
- 注意：IE 完全不支持；Safari 15.4+ 才稳定支持；旧版 Chrome（v117 之前）不支持
minmax(0, fit-content())
避免常见组合错误：minmax() 里不能嵌 fit-content()
minmax(fit-content(200px), 1fr) 是非法语法，整条声明会被浏览器丢弃，退化为 minmax(0, 1fr) —— 这会导致列失去内容感知能力。
真正想“有内容时收缩、没内容时也不塌”，得写成：
minmax(0, fit-content(200px))
-
0是关键：防止空内容或换行文本触发min-content行为导致意外拉伸 - Firefox 一直支持；Chrome/Edge 自 v117+ 开始兼容；Safari 直到 iOS 17.4 / macOS 14.4 才完整支持
- 线上项目若需兼容旧 Chrome，建议 fallback 到
max-content或加 JS 检测
单个子项想自适应？别动 grid-template-columns
如果只是某个按钮、标签或图片需要贴合自身内容宽度，而不是整列都跟着变，就别折腾列定义。
更稳妥的做法是：
button { justify-self: start; width: fit-content; }
-
width: fit-content在所有现代浏览器中稳定支持（包括旧版 Safari） - 配合
white-space: nowrap或word-break: break-word可控溢出 - 避免同时设
width: fit-content和grid-column: span 2，容易冲突
fit-content() 还是元素级 width: fit-content —— 前者影响整列布局逻辑，后者只管单个渲染盒；混用时兼容性断层会立刻暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
