minmax()定义网格轨道的弹性范围，仅在grid-template-columns/rows或repeat()中生效；常见用法如minmax(200px, 1fr)、配合auto-fit实现响应式均分；禁用calc()嵌套和单位混用。
minmax() 用在 grid-template-columns / grid-template-rows 里最实际
它不是用来“限制单个格子尺寸”的，而是定义**轨道（track）的弹性范围**。浏览器会先按 minmax(min, max) 给每条轨道分配基础空间，再根据剩余空间和 fr 单位做二次分配。
常见误用是把它套在 grid-column 或 width 上——那没效果，minmax() 只在显式轨道定义中生效（即 grid-template-xxx 或 repeat() 内部）。
-
minmax(200px, 1fr)：至少 200px，有富余就撑满可用空间（常用于侧边栏+主内容布局） -
minmax(min-content, 1fr)：内容多宽就多宽，但不超过 1fr 分配到的空间（适合文字标题自动伸缩） -
minmax(auto, 300px)：内容决定最小值，但绝不超 300px（防卡片被拉太宽）
和 auto-fit / auto-fill 搭配才能响应式均分
单独写 minmax(250px, 1fr) 不会自动换行或均分；必须配合 repeat(auto-fit, minmax(250px, 1fr))) 才能实现“容器内尽可能塞下不小于 250px 的列，多余空间均分”。
auto-fit 会折叠空轨道，auto-fill 则保留所有占位——多数响应式网格用 auto-fit 更合理。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));\n/* 容器宽度 ≥ 280px → 1 列；≥ 560px → 2 列；以此类推 */
minmax(min-content, max-content) 容易触发意外溢出
这两个关键字看似“按内容自适应”，但 min-content 对英文/数字文本可能极窄（如单个长单词不换行），max-content 又可能极大（整段不折行）。结果就是轨道强行撑开、父容器横向滚动。
更稳妥的组合是：minmax(minmax(0, min-content), 1fr)（极少用），或直接换成带具体数值的约束，比如 minmax(120px, 300px)。
- 遇到长 URL 或代码片段？加
word-break: break-all或overflow-wrap: break-word - 想让图片不破布局？给
img加max-width: 100%，别指望minmax()拦住它
不要和 calc() 嵌套使用，也不支持嵌套函数
minmax() 内部只接受长度、fr、min-content、max-content、auto 这几类值。下面这些写法都会失效：
-
minmax(calc(100% - 20px), 1fr)→ 语法错误，calc()不被允许 -
minmax(minmax(100px, 200px), 1fr)→ 不支持嵌套，解析为无效值 -
minmax(10vw, 50vh)→ 单位混用不报错但行为不可控，尤其在缩放时容易抖动
需要动态比例？用 CSS 自定义属性 + clamp() 替代，或退回到媒体查询分段定义。
真正难的是平衡“内容自适应”和“视觉稳定性”——minmax() 给了弹性，但也把计算权交给了浏览器。稍不注意，min-content 就会暴露排版缺陷，1fr 在嵌套 grid 里又容易引发循环依赖。动手前先想清楚：这个轨道到底该由内容驱动，还是由布局框架驱动。
