Grid网格布局内容上下不对齐主因是默认align-items: stretch导致子项拉伸不均，解决方法是在容器设align-items为start/center/end/baseline等值，并排查align-self覆盖、grid-auto-rows设置及行高一致性问题。
Grid网格布局中内容上下不对齐，通常是因为子项在行（track）内的默认对齐方式是 stretch（拉伸），而当子项自身高度不一致、或设置了固定高度/无高度时，视觉上就会显得“参差不齐”。解决的关键是用 align-items 控制所有子项在交叉轴（通常是垂直方向）上的对齐方式。
align-items 的常用值及效果
这个属性写在容器（grid container）上，作用于所有直接子项（grid items）：
- align-items: start —— 子项顶部与行首对齐（类似 flex-start）
- align-items: center —— 子项在行内垂直居中
- align-items: end —— 子项底部与行尾对齐
- align-items: stretch —— 默认值，子项拉伸填满整行高度（若子项没设高度）
- align-items: baseline —— 按第一行文字基线对齐（适合含文本的混合内容）
为什么有时 align-items 不生效？
常见原因有三个：
- 子项设置了 align-self: stretch 或其他值，覆盖了容器的 align-items（align-self 优先级更高）
- 容器设置了 grid-auto-rows: min-content 或 auto，导致每行高度由内容决定，但各自行高不同，即使对齐了顶部/中心，整体仍显错落
- 用了 grid-template-rows 但行高写死（如 100px），而子项内容超出或过小，需配合 overflow 或 padding 调整视觉
实用建议：快速统一垂直对齐
多数场景下，按以下顺序检查和调整即可：
- 先给 grid 容器加上 align-items: center（最常用）或 align-items: start（更自然的阅读流）
- 删掉子项上多余的 align-self，除非个别项真需要特殊对齐
- 如果仍不整齐，检查是否用了 grid-auto-rows: auto，可尝试改为 minmax(min-content, max-content) 或设定统一行高（如 grid-template-rows: repeat(3, 80px)）
- 文字类子项加 display: flex; align-items: center; 是备选方案，但属于“子项内部微调”，非网格层面对齐
基本上就这些。align-items 是 Grid 垂直对齐的主力属性，用对了，上下不齐的问题基本一招解决。
