结论：在 Grid 中用 fit-content() 控制侧边悬浮窗宽度，必须套一层 minmax(0, fit-content())，否则几乎肯定失效；因为 fit-content() 不是 grid-template-columns 的合法值，浏览器会直接丢弃该声明。
直接说结论：在 Grid 中用 fit-content() 控制侧边悬浮窗宽度，必须套一层 minmax(0, fit-content())，否则几乎肯定失效。
为什么单独写 fit-content(320px) 在 grid-template-columns 里没反应
浏览器根本不会认这个值——fit-content() 不是 Grid 轨道尺寸的合法关键字，它只在 width/height 属性或某些 Flex 场景中被原生支持。你在 grid-template-columns 里写 fit-content(320px)，Chrome/Edge v116 及更早版本会直接丢弃该声明，回退到隐式 auto；DevTools 里能看到整条规则被划掉（invalid value）。
常见错误现象：
- 悬浮窗明明内容很短，却撑满整个容器宽度
- 加了
fit-content(320px)后布局毫无变化，控制台也无报错 - 换 Firefox 看似乎有效，但一换 Chrome 就崩，误以为是浏览器 bug
正确写法：用 minmax(0, fit-content(320px)) 替代
这才是当前（2026 年）稳定可用的写法。它的含义是：“这列最小可缩到 0（防空内容或换行拉伸），最大不超过 fit-content(320px)”，而 fit-content(320px) 本身等价于 minmax(min-content, 320px)。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 侧边悬浮窗列推荐写成：
grid-template-columns: minmax(0, fit-content(320px)) 1fr - 如果要多列都自适应（比如悬浮窗 + 多个工具面板），别用
repeat(3, fit-content(240px))—— 无效，得写成repeat(3, minmax(0, fit-content(240px))) -
minmax(0, ...)中的0很关键：没有它，当悬浮窗内容为空、或含white-space: nowrap的长英文时，Grid 会按min-content分配，导致意外拉宽
容易被忽略的兼容性与内容陷阱
即使语法写对，也可能“看起来没生效”，原因往往不在 CSS 本身：
- 父容器没设
max-width或width，导致可用空间无限大，fit-content(320px)直接取到 320px 上限，失去“随内容收缩”的意义 - 悬浮窗内部有未约束的图片，忘了加
max-width: 100%，图片把max-content拉到几像素宽，fit-content()就只能卡死在上限 - 文本含长无空格字符串（如 base64 片段、URL），需配合
word-break: break-word或overflow-wrap: break-word，否则内容溢出容器，fit-content()仍按不换行尺寸计算 - 动态插入内容后 DOM 改变了，但 Grid 不自动重排——
fit-content()不监听内容变化，得手动触发重绘（例如改个transform或visibility）
真正难的不是写对那行 CSS，而是得同时盯住父容器宽度、子元素内联尺寸、换行策略和浏览器版本这四件事。少一个，fit-content() 就只是个摆设。
