CSS Grid中卡片等高需显式定义grid-template-rows（如repeat(2,1fr)）并确保容器有min-height；卡片内部用flex-column+flex:1实现内容区块拉伸，图片配object-fit:cover防撑高。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(...)) 就能搞定响应式卡片网格，等高是默认行为，不用额外 hack。
为什么 auto-fit + minmax 是核心写法
这个组合决定了卡片列数随容器宽度自动变化，且每列宽度均等——不是靠 JS 算列数，也不是靠媒体查询硬切断点。
-
minmax(280px, 1fr)表示：每列至少 280px 宽，剩余空间平均分配（1fr） -
auto-fit会让空的网格轨道自动收缩，比auto-fill更适合内容不定长的卡片列表 - 如果容器宽度不足 280px × 2，就自动退为单列；够宽就自然铺开，无需改 CSS
- 别写死列数如
repeat(3, 1fr)，那在小屏上会强制三列并导致卡片过窄或横向滚动
卡片内部怎么保证等高和底部贴底
外层 Grid 控制列数与行对齐，但单张卡片内部结构还得靠 Flex 布局撑开，否则文字多的卡片会把整行拉高，破坏视觉节奏。
- 给
.card设display: flex; flex-direction: column; height: 100% - 主体区域（如描述文字）用
flex-grow: 1或flex: 1吸收剩余空间 - 底部按钮用
margin-top: auto贴底，而不是position: absolute—— 后者会脱离文档流、影响可访问性 - 别给
.card写死height，它得依赖父级 Grid 的行轨道高度计算
gap 比 margin 更安全，别混用
gap 是 Grid 原生属性，只作用于网格项之间，不会触发外边距合并，也不需要清除末尾项的多余 margin。
- 写
gap: 1.5rem就能同时控制行间距和列间距 - 如果还给
.card加margin，会导致实际间距翻倍，且在不同断点下难以预测 - 旧教程常用
margin-right+:nth-child()清除，现在纯属冗余 - 注意：IE 不支持
gap，如需兼容 IE11，可用grid-column-gap/grid-row-gap替代（但不推荐为老浏览器妥协现代布局）
等高失效？先检查这三点
Grid 的等高是“同网格行内所有项目高度一致”，但容易被几个细节破坏：
- 父容器没设
height或min-height，而子项内容又很短 → 实际已等高，只是看起来“塌了” -
.card内部用了position: absolute且未设position: relative在父级，导致高度计算丢失 - 图片没加
object-fit: cover或aspect-ratio，加载时高度抖动，触发重排后等高错乱
最常被忽略的是：Grid 容器本身必须有明确的高度上下文（比如由内容撑开，或设 min-height），否则 align-items: stretch（默认）无高度可拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
