直接用 display: grid + align-items: stretch 就能实现响应式等高卡片布局，核心是 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，配合 align-items: stretch 和卡片内部 flex column 布局；auto-fit 收缩空轨道，minmax 设定列宽范围，避免写死列数或媒体查询，同时需确保 grid 容器有高度上下文且卡片不设 height/min-height 等干扰属性。
直接用 display: grid + align-items: stretch 就能实现，不需要 JS、不写死列数、也不靠媒体查询硬切断点。
grid-template-columns: repeat(auto-fit, minmax()) 是唯一靠谱的响应式列数控制方式
固定写 repeat(3, 1fr) 或靠 @media 切列数，一缩放就错乱或横向滚动。真正自适应的关键是让 Grid 自己算每行放几列：
-
minmax(280px, 1fr)表示每列至少 280px，剩余空间均分 —— 小屏时自动变单列，大屏撑满整行 - 必须用
auto-fit，不是auto-fill：auto-fit会收缩空轨道，auto-fill保留空轨道导致卡片被拉宽变形 - 别在卡片上写
height、min-height或max-height，否则align-items: stretch直接失效
align-items: stretch 失效的三个隐藏开关
它默认就生效，但很容易被悄悄关掉：
- 卡片自身设了
min-height（哪怕只是min-height: auto）—— 改成min-height: 0 - 卡片内部用了
margin-top: auto却没套在 flex 容器里（比如直接加在.card-footer上）—— 应该把.card设为display: flex; flex-direction: column; height: 100%，再把margin-top: auto加到.card-footer的父容器上 - Grid 容器的父级有
max-height或overflow: hidden—— 高度传递被切断，stretch 拉无可拉
多行卡片怎么“看起来一样高”
align-items: stretch 只能让每行各自等高，不同行之间仍可能高低不一。要统一视觉节奏：
- 给 Grid 容器加
grid-auto-rows: minmax(12rem, auto)（注意不是grid-template-rows）—— 所有隐式创建的行轨道都会至少 12rem 高，内容多就自动撑开 - 卡片内部用
display: flex; flex-direction: column; height: 100%，再让.card-content加flex: 1，.card-footer加margin-top: auto - 图片必须加
object-fit: cover或aspect-ratio，否则加载抖动会破坏等高节奏
Grid 容器本身得有高度上下文，否则 stretch 是空转
如果整个网格区域高度为 0（比如父级没约束、也没内容撑开），align-items: stretch 就没东西可拉。常见情况是：
- Grid 容器放在一个空的
div里，没设min-height - 用在 Bootstrap 的
.col里，但没给.col加h-100或确保其父级（如.row）有可计算高度 - 卡片内容极少，又没设
grid-auto-rows，导致行轨道塌陷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
