auto-fit + minmax() 能替代媒体查询，因浏览器在每像素宽度变化时动态重算列数，实现平滑过渡；误用 auto-fill、写死列数、漏 gap、错设 grid-auto-rows 或 height 传递链断裂均会导致响应失效。
repeat(auto-fit, minmax()) 是唯一能绕开媒体查询实现真正连续响应式卡片流的 Grid 写法，其他方式要么列数僵化，要么需要 JS 补位。
为什么 auto-fit + minmax() 能替代媒体查询
它让浏览器在每一像素宽度变化时都重新计算可容纳列数，不是“跳变”，而是平滑过渡。比如容器从 890px 拉宽到 910px，minmax(280px, 1fr) 就会从 3 列（3×280=840 ≤ 890）自然升为 3 列 → 仍够 → 再试 4 列（4×280=1120 > 910），所以最终还是 3 列；但若拉到 1150px，就稳稳撑开 4 列。这种计算是原生、无延迟、无需监听 resize 的。
常见错误包括：
- 误用
auto-fill：它保留空轨道，小内容量时卡片被横向拉宽变形 - 写死
repeat(3, 1fr)：在手机上强制三列，直接触发横向滚动 - 漏掉
gap：靠 margin 模拟间隙会导致换行错乱和塌陷
grid-auto-rows: minmax(12rem, auto) 才管多行等高
align-items: stretch 只作用于单行内，对跨行高度不生效。如果你看到第一行卡片高、第二行矮，说明没设 grid-auto-rows。
必须用 minmax(12rem, auto)，而不是 1fr：
-
1fr在无高度上下文（如父容器没min-height、没被约束）时会退化成min-content，看起来像没写 -
minmax(12rem, auto)保底防塌陷，内容多时自动撑开，不截断也不卡死 - 别碰
grid-template-rows——卡片数量不确定，显式定义行数只会制造空白或溢出
卡片内部必须配合 height 传递链
Grid 容器设了等高，子卡片不配合，等于白干。最容易漏掉的是三层结构：
- 卡片自身删掉所有
height、max-height、min-height；如有兜底需求，改用min-height: 0 - 卡片必须设
display: flex+flex-direction: column+height: 100% - 底部按钮用
margin-top: auto推到底，禁用position: absolute（它脱离文档流，中断高度继承） - 图片加
object-fit: cover或aspect-ratio，否则加载抖动会瞬间破坏等高节奏
“高度上下文”缺失是静默失效的根源
即使上面全写对，如果 Grid 容器本身渲染高度为 0（比如父级没给宽高、也没内容撑开），grid-auto-rows 就完全不生效——你调样式、查 computed、甚至加 border 都看不出问题，因为它是“看不见的塌陷”。
排查顺序建议：
- 检查父容器是否设置了
min-height或被 flex/grid 父级约束了高度 - 临时加
outline: 1px solid red到 Grid 容器，确认它是否真有渲染区域 - 删掉所有卡片内容，只留一个空
<div class="card"></div>，看是否仍有行高——没有，就是上下文丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
