auto-fit + minmax() 是唯一靠谱的起点，因它使列数随容器宽度自动增减且均等：minmax(280px, 1fr) 保最小宽防挤压，auto-fit 收缩空轨道防变形；grid-auto-rows: minmax(12rem, auto) 确保多行等高不塌陷。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现，不需要 JS、不依赖媒体查询硬切列数，也不需要给每张卡片设 height。
为什么 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 都没东西可拉。
