auto-fit + minmax() 是响应式列数的唯一靠谱写法，它让列数随容器宽度自动增减，minmax(280px, 1fr) 保障最小宽度与弹性分配，auto-fit 收缩空轨道避免拉伸变形；grid-auto-rows: minmax(12rem, auto) 确保多行等高且内容自适应。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) + grid-auto-rows: minmax(12rem, auto)，别碰 grid-template-rows，也别指望 align-items: stretch 单独撑起多行等高。
为什么 auto-fit + minmax() 是响应式列数的唯一靠谱写法
它让列数随容器宽度自动增减，不靠媒体查询硬切：
-
minmax(280px, 1fr)表示每列至少 280px（保障文字可读、图片不压扁），剩余空间均分 -
auto-fit会收缩空轨道，小屏下单列也不会留出窄缝或拉宽卡片；auto-fill则保留空位，内容少时卡片会被横向拉伸变形 - 写死
repeat(3, 1fr)或类似固定列数，缩放时要么错位，要么触发横向滚动 - 容器必须有明确宽度上下文（比如
width: 100%或继承父级），否则 Grid 不知道“可用空间”在哪
grid-auto-rows: minmax(12rem, auto) 才真正控制多行高度一致
align-items: stretch 只管单行内拉伸，各行之间仍可能高低不一。要让所有行视觉统一，必须靠这个：
-
minmax(12rem, auto)确保每行隐式轨道至少 12rem 高（防塌陷），内容多就自动撑开 - 别用
grid-auto-rows: 1fr——没有明确容器高度时，1fr会退化为内容最小高度，失去控制力 -
grid-template-rows: 1fr只影响显式定义的行，第二行起就失效；而grid-auto-rows作用于所有隐式创建的行轨道 - 如果卡片内容极简（比如只有标题），
12rem能兜底；若内容长，auto允许突破，不卡死
卡片内部结构不配合，外部再准也白搭
Grid 拉伸再稳，卡在子元素上就前功尽弃：
-
.card必须设display: flex; flex-direction: column; height: 100%，否则内部无法占满轨道 -
.card上不能有任何height、min-height、max-height；如需最小高度限制，改用min-height: 0 -
.card-content { flex: 1 }占满主体区域，.card-footer { margin-top: auto }把按钮钉到底部 - 图片必须加
object-fit: cover或aspect-ratio，否则加载抖动或比例失真会破坏等高节奏
最容易被忽略的前提：Grid 容器得有可计算的高度上下文
如果整个网格区域渲染高度为 0（比如父级 height: 0 或 overflow: hidden 切断了传递），那 stretch 和 1fr 都没东西可拉。要么由内容自然撑开，要么显式设 min-height。这点调试时几乎没人查，但一查一个准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
