align-items: stretch 在 Grid 卡片中失效，主因是卡片子元素设置了 height/min-height 或内部 flex 布局触发最小高度限制；需在 .card 上设 min-height: 0 并避免 margin-top: auto 误用在非容器元素上。
为什么 align-items: stretch 在 Grid 卡片里没生效
Grid 容器默认确实会拉伸子项高度，但前提是：子项没有设置 height、min-height 或 max-height，且内部内容未触发「最小高度收缩」行为。常见失效场景是卡片内用了 display: flex; flex-direction: column，又给底部按钮加了 margin-top: auto —— 这会让卡片实际高度由内容撑开，stretch 就失去作用。
实操建议：
- 检查卡片直接子元素是否设置了
height或min-height，删掉或改用min-height: 0 - 避免在卡片内部用
margin-top: auto推底部；改用display: flex; flex-direction: column; height: 100%+margin-top: auto在子容器上 - 确认 Grid 容器本身没有被父级限制高度（如
max-height或overflow: hidden）
Grid 实现等高卡片的最小可靠写法
不用依赖 JS，也不用设固定高度，核心就是两层控制：Grid 容器负责对齐，卡片自身允许弹性伸缩。
示例结构：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
align-items: stretch; /* 关键：必须显式声明 */
}
<p>.card {
display: flex;
flex-direction: column;
min-height: 0; /<em> 关键：解除 flex 子项最小高度限制 </em>/
}</p><p>.card-content {
flex: 1; /<em> 内容区占满剩余空间 </em>/
}</p><p>.card-footer {
margin-top: auto; /<em> 底部固定在最下方 </em>/
}注意：min-height: 0 必须加在 .card 上，不是 .card-content；否则 flex: 1 会因父容器“最小高度不可压缩”而失效。
和 Flex 布局对比：Grid 的优势在哪
Flex 做多行等高卡片需要包裹多层（比如每行一个 flex 容器），且无法跨行对齐高度；Grid 天然支持二维布局，所有卡片统一受 align-items: stretch 约束。
关键差异点：
- Flex 的
align-items只对「同一行内」子项生效；Grid 的align-items对整个网格区域的所有轨道项生效 - Grid 支持
grid-auto-rows: minmax(min-content, max-content)配合stretch，能更好应对内容高度突变 - 兼容性上，现代浏览器中 Grid 的
stretch行为更稳定；Flex 在 Safari 旧版本中对min-height的处理容易出错
移动端适配时容易忽略的陷阱
响应式卡片在小屏下常出现「高度被图片或标题撑爆」，导致等高失效。这不是 align-items 的问题，而是内容溢出破坏了计算。
必须加的防护措施：
- 图片统一加
max-width: 100%; height: auto;，并确保父容器有明确宽度上下文 - 长标题用
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 避免在卡片上写死
height或line-height，尤其不要用line-height: 1.2配合不定高文字 - 测试真机时注意 iOS Safari 对
min-height: 0的解析 bug —— 可补一句height: fit-content作降级
真正卡住的往往不是 Grid 语法，而是卡片内部内容脱离了弹性约束。等高只是表象，可控的高度来源才是关键。
