grid卡片等高需三者协同：容器有高度上下文（如min-height）、显式定义网格轨道（如1fr或minmax）、卡片内部用flex-column+flex:1拉伸；缺一即失效。
Grid 卡片等高不是靠“设个属性就自动对齐”，而是依赖容器高度上下文 + 网格轨道行为 + 子项内部弹性控制三者配合。单独写 grid-template-rows: 1fr 或 align-items: stretch 很可能没效果，因为缺了关键前提。
为什么卡片看起来不等高？先查这三点
常见现象是：某张卡片文字多、图片高，整行被它拉长，其他卡片却没跟着撑开——其实它们已经等高了，只是你没给容器提供可拉伸的高度基准。
-
.card-grid容器没设min-height或由内容撑开，align-items: stretch（默认值）无高度可拉伸 -
.card内部用了position: absolute且父级没设position: relative，导致高度脱离文档流计算 - 图片没加
object-fit: cover或aspect-ratio，加载时高度抖动，触发重排后网格轨道重算错乱
grid-template-columns: repeat(auto-fit, minmax()) 是响应式等高的基础
别写死列数如 repeat(3, 1fr)，那在小屏上会强制三列、卡片过窄甚至横向滚动。用 auto-fit + minmax() 才能让列数随容器宽度自然变化，同时保证每列宽度均等、同网格行内卡片自动等高。
-
minmax(280px, 1fr)：单列最小 280px，剩余空间按比例分配（1fr） -
auto-fit会收缩空轨道，比auto-fill更适合卡片内容不定长的场景 - 必须配合
gap控制间距，别再混用margin，否则实际间距翻倍且断点不可控
.card 内部必须用 flex-column + flex: 1 拉伸主体区域
Grid 只管行对齐，不管单张卡片内部结构。如果只靠 Grid，文字多的卡片会把整行拉高，但内部按钮仍堆在顶部，视觉节奏全乱。
.card { display: flex; flex-direction: column; height: 100%; }-
.card-body { flex: 1; }（或flex-grow: 1），吸收剩余空间 -
.card-footer { margin-top: auto; }，让按钮永远贴底，不用position: absolute - 别给
.card写死height，它得依赖 Grid 行轨道高度动态计算
IE11 兼容性问题怎么绕开？
IE11 不支持 gap、auto-fit、fr 单位，强行兼容会牺牲布局语义和维护性。如果真要支持：
- 用
grid-column-gap和grid-row-gap替代gap - 放弃
auto-fit，改用媒体查询 + 固定列数（如repeat(2, 1fr)/repeat(3, 1fr)） - 避免
minmax()，直接写像素值（如repeat(3, 280px)） - 但更现实的做法是：明确告知项目不支持 IE11，用现代语法写干净代码
最容易被忽略的是：Grid 的等高行为只在“同一网格行”内生效，而这个“行”由 grid-auto-rows 或显式 grid-template-rows 定义；如果子项跨行（比如 grid-row: 1 / -1），它就不再参与该行的等高拉伸逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
