fit-content()在grid中不能单独使用，必须嵌套在minmax(0, fit-content())中才生效；否则浏览器忽略该值，列宽退化为不可控的auto或min-content。
fit-content() 不能单独写在 grid-template-columns 里
直接写 grid-template-columns: fit-content(400px) 是无效的，浏览器会忽略该值，DevTools 中显示为划掉的 invalid value。规范要求它必须嵌套在 minmax() 中，正确写法是 minmax(0, fit-content(400px))。否则列宽可能退化为不可预测的 auto 或 min-content，尤其在内容为空或含换行文本时表现异常。
为什么必须加 minmax(0, ...)
minmax(0, fit-content(400px)) 的语义是：“最小可缩到 0，最大不超过内容自然宽度与 400px 的较小值”。这个 0 很关键：
- 没有它，空内容或纯换行文本可能触发意外拉伸（浏览器 fallback 到
min-content，而某些场景下min-content反而偏大） -
fit-content(400px)单独使用不被 Grid 轨道尺寸语法接受，它本质是为width/height属性设计的函数 - Chrome/Edge v117+ 和 Firefox 较新版本只认
minmax(0, fit-content(...))这一组合形式
fit-content(400px) 不等于 width: 400px
它不是固定宽度，而是弹性上限：列宽会尽量紧凑（接近 min-content），但不会超过 400px，也不会小于你设的最小值（比如配合 minmax(200px, fit-content(400px))）。常见误用包括：
- 对 Grid item 直接设
width: 400px—— 这会覆盖 Grid 分配逻辑，响应失效 - 在子项里写
width: fit-content想控制列宽 —— 无效，列宽由容器的grid-template-columns决定 - 期望
fit-content(100%)让列占满容器 —— 实际取的是「内容最大宽度」和「父容器内联尺寸 100%」二者较小值，常比预期窄
长文本、多语言、图标组合下的配套处理
仅靠 minmax(0, fit-content(400px)) 不足以保证视觉一致，还需子项配合：
- 长单词或 URL：加
overflow-wrap: break-word或word-break: break-word，否则min-content可能趋近于单字符宽，导致列异常收缩 - RTL 文本（如阿拉伯语）：需额外设
direction: rtl和text-align: right，否则text-overflow: ellipsis会在左端截断 - 图标 + 文字组合：给图标容器加
flex-shrink: 0或width: fit-content，避免被长文本挤变形 - 图片子项：必须设
max-width: 100%和height: auto，否则固有尺寸优先级高于 fit-content 限制
width: 100% 且非无限宽），否则浏览器无法计算“可用空间”，fit-content() 就失去参照。这点容易被忽略，调试时建议先确认容器外层是否被撑开或未约束。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
