auto-fit + minmax() 能实现无断点响应式网格，因浏览器动态试算列数并收缩空轨道；280px 是实测单列底线；grid-template-columns 失效常因父容器未设 display: grid 或存在 overflow/width 约束。
直接用 repeat(auto-fit, minmax()) 就能实现真正无需断点的响应式卡片网格，但必须配对使用 auto-fit 和 minmax()，且父容器要有可计算宽度。
为什么 auto-fit + minmax() 能替代媒体查询
浏览器不是“猜”列数，而是基于容器宽度和 minmax(280px, 1fr) 的约束反复试算：当前宽度最多能塞下几个「至少 280px」的列？能塞 3 个就渲染 3 列，只能塞 1 个就只渲染 1 列，多余空间由 1fr 均分。这个过程完全动态，不依赖像素断点。
-
auto-fit会把没内容的空轨道收掉，避免小屏下出现“看不见的列”或横向滚动条 -
auto-fill则保留所有可能轨道，容易导致卡片被压窄变形（尤其在仪表盘类场景中需慎用） -
minmax(280px, 1fr)中的280px是实测移动端单列底线：含 padding、border 后文字仍可读，手指热区足够点击 - 设成
200px会导致小屏换行频繁、行高失控；设成350px会让 iPad 竖屏（768px 宽）只剩 2 列，空间浪费严重
grid-template-columns 不生效的常见原因
写对了语法却没反应，大概率是上下文约束被悄悄破坏：
- 父容器没设
display: grid，或被祖先元素的overflow: hidden/white-space: nowrap截断了自动换行行为 - 外层容器被
max-width: 1200px锁死，又没配width: 100%，Grid 实际计算宽度远大于屏幕 - 卡片子元素写了
width: 300px或min-width: 400px（比如未折行长 URL），撑爆了minmax()的弹性逻辑 - 调试时直接看 Elements → Styles 面板里的 computed
grid-template-columns值，它显示的是浏览器最终解析出的列数和宽度，比猜更准
卡片等高与内容对齐的关键控制点
align-items: stretch 默认就生效，但很容易被以下操作悄悄关掉：
- 卡片自身写了
height、min-height或max-height（删掉或改用min-height: 0） - 卡片内部用了
margin-top: auto，但父容器不是display: flex（比如直接加在.card-footer上） - 图片没设
object-fit: cover或aspect-ratio，加载抖动会破坏等高节奏 - 要让所有行“看起来一样高”，得加
grid-auto-rows: minmax(12rem, auto)（注意不是grid-template-rows）
最容易被忽略的是：Grid 容器本身得有可计算的高度上下文——要么由内容自然撑开，要么设 min-height。如果整个网格区域高度为 0，stretch 就没东西可拉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
