外层grid容器必须设明确高度（如min-height或嵌套于有尺寸父容器），否则align-items: stretch失效；卡片内图片需设height: 100%+object-fit: cover，子项禁用margin，gap不继承，响应式断点后等高需js同步或放弃。
外层 Grid 容器必须设明确高度约束
没有高度参照时，align-items: stretch 会失效——卡片看起来不等高，其实不是 Grid 失效，而是它没东西可“拉”。常见表现是三列布局里某张卡片内容少，就明显矮一截。
必须给外层容器加 min-height 或 height，比如：min-height: 300px、height: 100vh，或确保它嵌套在有尺寸的 flex/grid 父容器中。别依赖 height: auto 下的 stretch 行为。
- 删掉所有卡片子项上的
height、max-height、align-self -
img元素默认min-height: auto，会阻断拉伸，需显式设height: 100%+object-fit: cover - 用
gap控制卡片间距，别在卡片上写margin-bottom，否则干扰行高计算
每层卡片内部必须独立声明 display: grid 或 display: flex
把所有卡片塞进同一层 Grid 是最常见错误。外层只管结构（比如三栏主区），每张卡片自身才是内容对齐的真正控制点。
例如商品卡片内要让标题顶对齐、按钮底对齐，仅靠外层 align-items: stretch 不够——它不穿透子元素。必须在卡片上再设一层布局：
- 卡片元素加
display: flex+flex-direction: column，子项用flex: 1分配空间 - 或设
display: grid+grid-template-rows: auto 1fr auto，让中间区域占满剩余高度 - 避免在子卡片里滥用
grid-column: span 2——这是对外层生效的，子层跨格需在子 Grid 内定义
响应式断点后等高逻辑会断裂，得换思路
媒体查询把 grid-template-columns: repeat(3, 1fr) 改成 1fr 后，卡片变成上下排列、分属不同隐式行轨道。align-items: stretch 只作用于各自所在行，不再有横向等高基础。
此时纯 CSS 无法维持视觉等高。可行路径只有两个：
- 放弃断点后等高，改用
align-items: start+ 统一padding和gap保持视觉节奏 - 需要严格等高时，用 JavaScript 手动同步高度（监听 resize、内容加载完成等时机）
- 不推荐 Flexbox +
flex-wrap: wrap配align-content: stretch——它只在多行且容器有固定高度时才有效，兼容性差
子网格用 gap 独立控制，别指望继承
gap 不继承。外层设了 gap: 1rem，不会影响卡片内部子元素间距。这是故意设计，也是优势——你可以外层宽松、内层紧凑，互不干扰。
比如仪表盘中，父网格三列间距大，每张卡片内部分为标题/图表/操作区，间距小，就该分别设：
- 外层：
gap: 20px - 卡片内部：
display: grid+gap: 8px+padding: 12px - 别在卡片子项上写
margin，那会破坏 Grid 的拉伸计算
min-height 干扰——这两点不解决，其他所有设置都白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
