minmax()必须嵌套在repeat()中并配合grid-template-columns使用才生效；单独写minmax(250px, 1fr)无效，因它不是独立属性而是轨道尺寸定义，需auto-fit/auto-fill提供上下文和断行逻辑。
minmax() 不是独立可用的函数，它必须出现在 grid-template-columns 或 grid-template-rows 中，且必须包裹在 repeat() 里才真正生效；单独写 minmax(250px, 1fr) 不会改变任何布局。
为什么 grid-template-columns: minmax(250px, 1fr) 没反应？
这是最常踩的坑：浏览器根本不会解析这个写法。因为 minmax() 是轨道尺寸定义，不是 CSS 属性值，不能直接赋给 grid-template-columns —— 它需要“容器”和“上下文”。
-
grid-template-columns: minmax(250px, 1fr)❌ 语法合法但无效，等价于没写 -
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))✅ 正确，auto-fit提供自动断行逻辑，repeat()提供轨道生成机制 - 别把
minmax()放在grid-column、width或子项样式里——那些地方不支持
auto-fit 和 auto-fill 到底选哪个？
两者都触发 minmax() 计算，但处理“空轨道”的方式完全不同，直接影响视觉密度和行为稳定性。
-
auto-fit：合并没有内容的轨道，让有内容的列均分剩余空间 → 卡片列表、导航栏等“内容驱动”场景首选 -
auto-fill：保留所有符合minmax()条件的轨道，哪怕为空也占位 → 适合仪表盘、拖拽槽位等需严格对齐的场景 - 实测中，
auto-fit在 resize 时重排更少，小屏下不易出现右侧大片空白；但若子项height: 0或visibility: hidden，可能坍缩成单行
列宽卡死在最小值不动？检查这三处
写了 repeat(auto-fit, minmax(280px, 1fr)) 却不伸展，通常不是语法错，而是被隐性约束截断了。
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
width: 100%或max-width: 100%——1fr需要明确的参照宽度，inline-grid默认不占满，flex包裹层会截断计算 - 子项设置了
width: 100%、min-width: fit-content或white-space: nowrap—— 这些会阻止1fr分配，强制撑开列宽 - 图片或内联元素未处理换行：
img缺少width: 100%; height: auto;，长单词缺overflow-wrap: break-word
兼容性和降级怎么写才靠谱？
iOS 10.3+ 和 Chrome 57+ 支持 auto-fit，但 Android 4.4–6.0 WebView、iOS 9 Safari 会直接忽略该关键字，退化为单列或失效。
- 双写法兜底：
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));—— 浏览器跳过无法识别的声明 - 别用
@supports (grid-template-columns: repeat(auto-fit, ...))检测，CSS 解析器不支持这种复杂特征判断 - 真要支持 iOS 9，放弃
auto-fit，改用@media分段控制列数：1fr、repeat(2, 1fr)、repeat(4, 1fr)
真正麻烦的是嵌套 Grid 或与 Flex 混用时，minmax() 的 1fr 部分常被外层尺寸约束截断——这时硬调参数不如退一步，用媒体查询做关键断点干预，而不是指望它扛住所有情况。
