fit-content()是函数而非关键字，必须传入带单位的参数（如300px或40%）才生效；仅写fit-content会静默失效，其作用是取内容宽度与参数值的较小者，适用于grid-template-columns和min-width等属性，不支持无参调用、auto-columns或Flexbox。
fit-content(300px) 必须带单位参数才生效
直接写 grid-template-columns: fit-content 是无效的——浏览器会静默丢弃该值，回退到默认行为（通常是 auto 或 minmax(min-content, max-content)），结果不可控。你看到的“没反应”，其实是语法错误被忽略。
fit-content() 是函数，不是关键字，必须传入一个合法的 fit-content(300px) 或 fit-content(40%)。它的含义是：列宽取「内容最大内联尺寸」和「该参数值」二者中的较小者。
- 内容短（如 “设置”、“OK”），列宽 ≈ 文字实际宽度 + padding
- 内容长（如一串无空格英文或长URL），列宽被卡在 300px 不再增长
- 不支持
fit-content()无参调用，也不支持用于grid-auto-columns或 Flexbox
用 repeat(auto-fit, fit-content(300px)) 实现每项独立收缩
如果只写 grid-template-columns: fit-content(300px)，那只是定义单列，所有网格项都挤在这条固定上限的列里，无法自动换行或分布。
真正让每个网格项按自身内容宽度收缩、又不超 300px 的写法是：
.grid { display: grid; grid-template-columns: repeat(auto-fit, fit-content(300px)); gap: 12px; }
这时每个项最大 300px，但若图片只有 180px 宽，该项就会收缩到约 180px + padding，视觉密度更一致。
-
auto-fit触发自动重复，同时合并空轨道；auto-fill则保留空轨道占位 - 别混用
minmax()和fit-content()，例如minmax(fit-content(200px), 1fr)是非法语法，整条声明会被忽略 - Chrome/Edge v117 之前不支持
minmax(0, fit-content(200px))，只有 Firefox 原生支持；v117+ 才开始兼容
IE 和旧 Safari 不支持，需降级方案
fit-content() 在 IE 中完全不支持；Safari 直到 15.4 才稳定支持；Edge 16+ 开始支持，但早期版本有 bug。
若需兼容旧环境，不能直接 fallback 到 1fr（它会让短文本拉得太开），推荐用组合方式模拟：
.grid-item { width: 100%; max-width: 300px; }
但要注意：width 和 max-width 必须作用在 Grid item 上，且父容器不能有 min-width 锁死，否则响应失效。
- 不要对 Grid item 直接设
width: 300px，这会覆盖 Grid 自动分配逻辑 - 用
display: inline-block模拟width: fit-content行为时，会丢失 Grid 的行列控制能力，慎用 - 若项目已用
grid-auto-flow: column，fit-content()行为更可预测；默认row流下，它只影响单列宽度，不影响行高
用 min-width: fit-content 包裹超宽子项
当 Grid 容器里有 width: 111vw 或 height: 111vh 的子项时，容器默认不会扩展去包裹它们——导致“破框而出”。这时不是调列宽，而是要改容器自身尺寸下限。
正确做法是给 Grid 容器加：
.grid-container { min-width: fit-content; min-height: fit-content; }
这会让容器最小尺寸至少等于所有子项中最大的固有宽高（浏览器会把 111vw 解析为实际像素后参与计算）。
- 这个技巧对 Z 轴堆叠场景特别关键，比如多个绝对定位子项共享同一网格区域
-
min-width: fit-content和grid-template-columns: fit-content(300px)解决的是不同层级的问题：前者管容器整体尺寸，后者管内部轨道分配 - 别指望
fit-content()在grid-auto-rows或grid-row上起作用——它只对列轨道（grid-template-columns）和块级尺寸属性（width、min-width等）有效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
