minmax()的min值必须带单位，否则整条规则被忽略；需配合子项min-width:0、内容截断样式及auto-fit，并用@supports检测safari兼容性。
minmax() 的 min 值没单位，浏览器直接忽略整条规则
写 minmax(280, 1fr) 或 minmax(50%, 1fr) 看似合理，但 280 缺少单位（如 px、rem）是非法值。CSS 规范要求 minmax() 的两个参数都必须是合法长度或弹性单位，否则整个函数被静默丢弃，回退到浏览器默认列行为（常表现为单列或固定列数）。
常见错误场景：
- 从 JS 动态拼接样式时漏掉单位：
`minmax(${width}, 1fr)`→width是纯数字 - 复制设计稿数值未补单位，比如把“280”直接当像素用
- 误以为
%在minmax()中可省略（实际不可，50%合法，50非法）
验证方法：打开开发者工具 → 「Computed」→ 找 grid-template-columns → 若显示为 none 或原始声明被划掉，大概率是单位缺失。
minmax(0, 1fr) 单独写无效，子项不配合就等于没写
minmax(0, 1fr) 本身没问题，但它只定义轨道意愿；真正决定列宽的是网格直接子项的 min-width 行为。默认 min-width: auto（等价于内容最小宽度），会死顶着不让轨道收缩——结果就是长 URL 或图片把整列拉宽，其他列被压缩甚至消失。
必须同步做三件事：
- 给网格容器的直系子元素加
min-width: 0（包括<img>、<iframe></iframe>、display: flex容器） - 若要文字省略，需四者共存：
overflow: hidden+text-overflow: ellipsis+white-space: nowrap+width或max-width - 嵌套 Grid/Flex 的子项也要加
min-width: 0，否则撑开会传导
漏掉任意一项，minmax(0, 1fr) 就只是个摆设。
auto-fit 和 auto-fill 混用导致列数跳变，视觉上像“异常”
repeat(auto-fit, minmax(250px, 1fr)) 和 repeat(auto-fill, minmax(250px, 1fr)) 行为差异极大，但很多人没意识到它们在小屏下的表现可能完全不同：
-
auto-fit：生成轨道后，把空轨道塌缩，剩余空间由有内容的列均分 → 列数随内容动态减少，适合卡片流 -
auto-fill：硬生成所有可能轨道（哪怕没内容）→ 小屏下留白严重，列宽虚高
例如容器宽 600px、minmax(250px, 1fr)：
-
auto-fill会建 2 列（500px 占用），剩 100px 空白 -
auto-fit则让 2 列各占 300px，无空白
如果没控制好断点或内容数量，列数会在 2↔3 之间反复跳变，看起来像尺寸计算错乱。
Safari 14.1 及更早版本对 minmax(0, ...) 解析不稳定
在 Safari ≤14.1 中，minmax(0, 1fr) 的 0 会被错误解析，导致列宽忽大忽小、甚至完全不收缩。这不是你代码的问题，而是内核 bug。
安全做法是特性检测降级：
@supports not (grid-template-columns: minmax(0, 1fr))) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
同时避免在旧 Safari 场景中依赖 minmax(0, ...) 做关键布局——它不可靠，且无法 polyfill。
真正难调的从来不是语法，而是 minmax() 的生效链条太长：单位 → 容器可用空间 → 子项 min-width → 内容换行策略 → 浏览器内核兼容性。任一环节断掉，结果都可能是列宽“异常”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
