align-items: stretch失效主因是子项存在height/min-height等显式高度限制、父容器高度未定义或内容干扰；解决需显式设grid-template-rows: 1fr或grid-auto-rows: 1fr，配合min-height: 0、flex-column内部对齐及aspect-ratio统一图片。
align-items: stretch 是默认行为，但卡片高度不一致时它不生效
很多人以为只要给 grid 容器设了 align-items: stretch（或干脆不写，因为这是默认值），子项就会自动拉伸填满行高——但实际常看到卡片高度参差不齐。根本原因是：**stretch 只对“没有设定明确高度”的子项起作用；一旦某个卡片内部内容撑高、或写了 min-height/height，拉伸就可能被中断**。
常见触发场景：grid-template-rows: auto（默认）、卡片内有不定高标题+多行描述、图片未约束宽高比。
- 检查卡片是否设置了
height、max-height或overflow: hidden—— 这些会阻止拉伸 - 确认父容器的
display: grid已正确声明，且未被align-content或justify-items干扰 - 如果用了
grid-template-rows: 1fr等显式轨道，align-items仍有效；但若用auto-fit+minmax()，需确保最小轨道没锁死高度
用 grid-template-rows: 1fr 实现真正等高，比 align-items 更可靠
当需要所有卡片在每行内严格等高，grid-template-rows: 1fr 是更直接的解法。它让每行的轨道按剩余空间均分，子项自然被撑开——此时 align-items 是否为 stretch 已不关键。
注意：这个技巧只对单行或多行“固定行数”有效；若卡片数量动态、且希望每行都独立等高（比如响应式 2 列变 3 列），得配合 grid-auto-rows: 1fr 和容器高度控制。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-auto-rows: 1fr; /* 关键：为每一隐式行设等高轨道 */
gap: 1rem;
}
-
grid-auto-rows影响的是隐式网格行（即超出grid-template-rows定义的部分），对响应式布局更实用 - 若容器无明确高度，
1fr会按内容最小高度计算，此时需加min-height: 0到卡片上防止内容溢出干扰 - 图片记得加
img { height: 100%; object-fit: cover; }，否则会破坏等高
卡片内部内容对齐失效？检查 min-height 和 box-sizing
即使外部网格拉伸成功，卡片内标题、按钮等元素仍可能错位——典型表现是文字贴顶、按钮沉底。这是因为 align-items: stretch 不会穿透到子元素，它只作用于直接 grid 子项。
解决方案不是在卡片里再套一层 flex，而是用卡片自身的 display: flex + flex-direction: column 控制内部对齐：
.card {
display: flex;
flex-direction: column;
height: 100%; /* 必须写，否则 flex 不知道拉伸基准 */
}
.card-content {
flex: 1; /* 占满剩余空间，让按钮固定在底部 */
}
- 卡片必须设
height: 100%，否则flex: 1无参照 - 避免在卡片上写
min-height大于100%，这会覆盖拉伸效果 -
box-sizing: border-box要全局或至少在卡片上启用，否则 padding 会撑出额外高度
IE11 兼容性陷阱：stretch 在 flex item 中不支持，grid 中却可用
如果你还在支持 IE11，要注意一个反直觉点：align-items: stretch 在 flex 布局中 IE11 表现不稳定（尤其嵌套 flex），但在 grid 布局中，IE11 对 stretch 的支持反而更靠谱——前提是用标准语法（不用 -ms- 前缀）。
不过 IE11 的 grid 本身限制多：grid-template-areas 不支持命名区域、gap 需用 -ms-grid-column-gap 等私有属性、auto-fit 完全不可用。
- IE11 下优先用
grid-template-columns: repeat(3, 1fr)固定列数，避开auto-fit -
align-items可照常写，无需前缀；但justify-items在 IE11 中无效，得靠text-align或 wrapper - 测试时重点看卡片是否被截断——IE11 对
overflow: hidden+flex: 1组合极其敏感
真正卡住的往往不是 align-items 写没写，而是卡片自身有没有“让出高度控制权”：内容是否溢出、图片是否失衡、内部 flex 是否缺 height: 100%。这些细节不处理，再标准的 grid 布局也会塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
