minmax() 是 CSS Grid 的轨道大小定义关键字，非函数，仅用于 grid-template-columns/rows，需严格按 minmax(最小值, 最大值) 书写，fr 不可作最小值，常与 repeat() 搭配且括号层级必须正确。
minmax() 是什么，不是 CSS 函数
minmax() 看起来像函数，但它是 CSS Grid 的一个**轨道大小定义关键字**，不是 JavaScript 那种可调用函数。它只在 grid-template-columns 或 grid-template-rows 的值中合法出现，比如 minmax(200px, 1fr)。写成 minmax(200px, 1fr) 以外的形式（如加引号、放错位置、嵌套在 calc() 里）都会被浏览器忽略或报解析错误。
正确写法：两个参数必须都存在且类型合理
它接受且仅接受两个参数：最小尺寸 和 最大尺寸，中间用逗号分隔。常见组合有：
-
minmax(200px, 1fr)：列宽至少 200px，剩余空间按比例分配 -
minmax(min-content, max-content)：内容最窄和最宽时的自然宽度 -
minmax(auto, 1fr)：等价于minmax(min-content, 1fr)，但语义更模糊，不推荐 -
minmax(100px, 300px)：固定区间，超出内容会换行或溢出
注意：minmax(1fr, 2fr) 是无效的——fr 单位不能作为最小值，因为 fr 本身依赖于可用空间，无法“保证最小”。
和 repeat() 搭配时容易漏掉括号层级
想创建“最多 4 列，每列最小 250px、最多占 1fr”的响应式网格？别写成 repeat(auto-fit, minmax(250px, 1fr)) ——这看起来对，但实际要确保整个 minmax(...) 是 repeat() 的第二个参数。正确写法是：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
少一层括号（比如写成 repeat(auto-fit, minmax(250px, 1fr)) 缺末尾括号）会导致整条声明失效；多一层（比如 repeat(auto-fit, (minmax(250px, 1fr)))）也会被拒绝。另外，auto-fit 和 auto-fill 行为不同：auto-fit 会合并空轨道，auto-fill 保留空占位，这点常被忽略。
IE 不支持，且 Safari 旧版本对 min-content/max-content 支持弱
minmax() 在 IE 中完全不可用，所有基于它的网格布局会退化为单列流式。即使现代浏览器，Safari ≤14 对 minmax(min-content, ...) 渲染不稳定，可能表现为高度塌陷或列宽异常。如果设计强依赖内容尺寸弹性，建议加降级：
grid-template-columns: 250px 250px 250px;<br>grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))); /* 后续覆盖 */
这种层叠写法能保证老浏览器至少显示固定列数，新浏览器才启用弹性逻辑。别指望靠 autoprefixer 补全 minmax() ——它不是前缀问题，是语法级缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
