auto-fit + minmax() 是核心写法，因它让 grid 自动计算每行列数：minmax(280px, 1fr) 设定列宽范围，auto-fit 收缩空轨道防挤压，避免 auto-fill 留空轨或固定列数导致错乱。
用 grid-template-columns: repeat(auto-fit, minmax()) 搭配 align-items: stretch 和卡片内部 display: flex; flex-direction: column; height: 100%，就能实现真正响应式且视觉一致的等高卡片。不写死列数、不依赖 JS、也不需要给卡片设固定高度。
为什么 auto-fit + minmax() 是核心写法
这个组合让 Grid 自动计算每行能放几列，而不是靠媒体查询硬切：
- minmax(280px, 1fr) 表示每列至少 280px 宽，剩余空间均分
- auto-fit 会让空轨道自动收缩，避免小屏下出现“挤在一起”的窄列
- 不要用 auto-fill，它会保留空轨道，导致卡片在内容少时被拉宽变形
- 别写 repeat(3, 1fr) 这类固定列数，一缩放就错乱或横向滚动
align-items: stretch 失效的常见原因
它默认就生效，但容易被以下操作悄悄关掉：
- 卡片自身设置了 height、min-height 或 max-height（删掉或改用 min-height: 0）
- 卡片内部用了 margin-top: auto 在非 flex 容器上（比如直接加在 .card-footer 上，而不是它的父容器）
- Grid 容器的父级有 max-height 或 overflow: hidden，切断了高度传递
- 卡片里用了 position: absolute 且没配 position: relative 在父级，导致高度脱离文档流
多行卡片怎么保持“整页统一高度感”
单靠 align-items: stretch 只能让每行各自等高，但不同行之间仍可能高低不一。要让所有行“看起来一样高”，得靠：
- 给 Grid 容器加 grid-auto-rows: minmax(12rem, auto)（注意不是 grid-template-rows）
- 这个值会作用于所有隐式创建的行轨道，确保每行至少有 12rem 高，内容多就自动撑开
- 配合卡片内部 flex: 1 占满主体区域，再用 margin-top: auto 把按钮推到底部
- 图片必须加 object-fit: cover 或 aspect-ratio，否则加载抖动会破坏等高节奏
最容易被忽略的是：Grid 容器本身得有可计算的高度上下文——要么由内容自然撑开，要么设 min-height。如果整个网格区域高度为 0，stretch 就没东西可拉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
