align-items: stretch 默认生效，但常因子元素 height/min-height 设置、box-sizing 为 content-box、内部 flex 未设 height: 100%、图片未约束、跨行 span 或 align-self 覆盖等原因导致视觉不齐，需综合调整。
align-items: stretch 是默认行为，但没生效？先检查 display 和 box-sizing
Grid 容器默认就是 align-items: stretch，子项本该自动拉满行高。如果高度不一致，大概率不是它失效，而是被其他样式干扰了。
grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* align-items: stretch; ← 默认就有，不用写 */
}常见干扰源：
- 子元素设置了
height、min-height或max-height - 子元素的
box-sizing是content-box，而 padding/margin 撑开了实际尺寸 - 子元素内部有
display: flex且没设flex-direction: column+height: 100%，导致内容没占满
子元素内有图片或文字溢出时高度塌陷？用 min-height 配合 align-items
纯文字块在 Grid 行中可能因换行、字体大小差异显得高度不同；含图片的项常因图片未设置 height: 100% 或 object-fit 导致高度不齐。这时不能只靠 align-items: stretch，得配合约束子项自身：
- 给子项统一设
min-height: 0（防止 flex/grid 内部 shrink 失效） - 图片加
height: 100%; object-fit: cover;，并确保父容器有明确高度上下文 - 文字容器加
display: flex; flex-direction: column;，再用flex: 1让内容区撑满剩余空间
.grid-item {
min-height: 0;
display: flex;
flex-direction: column;
}
.grid-item img {
height: 100%;
object-fit: cover;
}
.content {
flex: 1;
}跨行子项（grid-row: span 2）会破坏对齐？避免混用 span 和 stretch
当某个子元素用了 grid-row: span 2，它就脱离了当前行的 align-items 约束，变成独立占据两行高度。此时其他单行子项仍按各自所在行 stretch，视觉上必然错位。
- 若需视觉等高，所有子项应保持相同
grid-row范围（即都 span 1） - 真要跨行，改用
grid-template-rows: repeat(2, minmax(min-content, 1fr))并让所有子项显式指定起始/结束行 - 更稳妥的做法：用
display: contents把跨行逻辑移出渲染树，改由 JS 或结构重组处理
Flex 嵌套在 Grid 子项里导致 stretch 失效？重置 align-self
Grid 子项内部用了 display: flex，但它的子元素没填满高度——这通常是因为该子项的 align-self 被设成了 start 或 center，覆盖了容器的 align-items: stretch。
- 检查子项是否写了
align-self: start、self-start等值，删掉或改为stretch - 子项是 flex 容器时，其直接子元素需设
align-items: stretch（flex 的 align-items 不继承 grid 的） - 别依赖 margin: auto 垂直居中，它会阻止 stretch 生效
align-items 只作用于**直接子元素**，不穿透到孙子级。
实际项目中最容易忽略的是 min-height 和 box-sizing 的组合影响，尤其当子元素有 padding 且没设 box-sizing: border-box 时，stretch 拉的是 content 区域高度，padding 会额外叠加上去，造成视觉不齐。
