应使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 和 grid-auto-rows: minmax(12rem, auto)，避免 grid-template-rows 和 align-items: stretch 单独撑高；auto-fit 实现自适应列数，minmax 确保最小宽度与弹性分配，grid-auto-rows 统一多行高度，卡片需 flex 布局并清除 height 限制，容器须有高度上下文。
直接用 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-template-rows: 1fr更实用——后者只影响显式定义的行，第二行起就失效 - 如果卡片内容极简（比如只有标题），
12rem能兜底；若内容长，auto允许突破，不卡死 - IE 完全不支持，Safari 10.1+、Chrome 57+、Firefox 52+ 均可用
卡片内部结构必须配合，否则拉伸白设
Grid 拉伸再准，卡在子元素上就前功尽弃：
立即学习“前端免费学习笔记（深入）”；
-
.card必须设display: flex; flex-direction: column; height: 100%，否则内部无法占满轨道 - 底部按钮用
margin-top: auto推到底，别用position: absolute—— 后者脱离文档流，高度计算中断 - 图片加
object-fit: cover或aspect-ratio，否则加载抖动或比例失真会破坏等高节奏 - 删掉
.card上任何height、max-height、min-height，这些会阻止拉伸；如需最小高度，改用min-height: 0
最容易被忽略的是：Grid 容器本身得有可计算的高度上下文——要么由内容自然撑开，要么设 min-height。如果整个网格区域渲染高度为 0，stretch 和 1fr 都没东西可拉。
