正确写法是repeat(auto-fit, minmax(280px, 1fr))，其中auto-fit触发列数动态计算，minmax()定义轨道宽度区间约束，而非二选一；单独使用minmax()无效，需配合auto-fit且避免父容器、子项、图片三处常见干扰。
直接写 minmax(280px, 1fr) 是实现最小自适应宽度的正确起点，但只写这个函数本身不会自动响应——它必须嵌套在 repeat(auto-fit, ...) 中，且子项、图片、父容器三处极易破坏效果。
为什么单独用 minmax() 不会“自适应”
minmax() 本身只是定义单条轨道的尺寸范围，不是布局指令。浏览器不会因为它存在就自动增减列数。
- 写成
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr)→ 固定两列，不随容器缩放 - 写成
grid-template-columns: repeat(3, minmax(280px, 1fr))→ 强制三列，窄屏下溢出或压缩 - 真正起作用的组合是：
repeat(auto-fit, minmax(280px, 1fr))，其中auto-fit触发列数动态计算
minmax(280px, 1fr) 的实际行为不是“最小或最大”
它告诉浏览器：“这列轨道宽度必须 ≥ 280px，且 ≤ 它按 1fr 应得的那份剩余空间”。不是二选一，而是区间约束。
- 容器宽 800px → 最多塞 2 列（2 × 280px = 560px ≤ 800px），剩 240px 均分 → 每列 400px
- 容器宽 250px → 连一列都塞不下，降级为单列，宽度就是 250px（此时
1fr生效，占满） - 把
1fr换成auto或max-content→ 列宽失去弹性上限，auto-fit失效，可能塌成一列或横向溢出
写了 minmax() 却还是被压缩？检查这三个地方
90% 的“失效”问题不出在 Grid 规则本身，而是被外层样式悄悄覆盖或干扰：
- 父容器有更上层的
grid-template-columns（比如框架默认类或全局 CSS），直接覆盖了你的设置 - 子项设置了
min-width: 0或overflow: hidden，触发 Chrome 的最小内联尺寸算法修正，强制收缩 - 卡片里有未约束的
max-width: 100%; height: auto;，否则图片撑破轨道
移动端列数没变？别急着改媒体查询
先看开发者工具 Elements 面板中 computed 的 grid-template-columns 值，它显示浏览器最终解析出的列数和宽度，比猜更准。
-
minmax()第一个参数设太高（如minmax(400px, 1fr)），而 iPhone SE 视口仅 375px - 外层容器设了
max-width: 1200px却没配width: 100%，Grid 实际计算宽度远大于视口 - 祖先元素有
white-space: nowrap或overflow: hidden，截断了 Grid 的自动换行行为
最常被忽略的是：子项内部用了 width: 100% 或 flex: 0 0 auto —— Grid 已接管布局，这类声明反而会干扰 minmax() 的轨道计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
