align-items 不生效的主因是父容器未设为 display: grid；它仅对 grid 容器的直接子项有效，且不可写在子项上；跨行时 align-self 参考整个轨道块，place-self 更适合视觉居中。
align-items 不生效？检查父容器是否为 grid 容器
很多情况下 align-items 看似没反应，根本原因是它只对直接子元素起作用，且父元素必须是 display: grid（或 inline-grid）。如果父容器用了 flex、block 或忘了设 display，这个属性就完全被忽略。
- 确认父元素有
display: grid，而不是仅靠grid-template-columns等属性“隐式触发”——CSS Grid 不会因定义了网格模板就自动变成 grid 容器 - 检查是否误把
align-items写在了子项上（它属于容器属性，不是子项属性） - 注意浏览器兼容性：
align-items在 Grid 中从 Chrome 57+/Firefox 52+/Safari 10.1+ 开始稳定支持，旧版 Safari 可能需加-webkit-前缀（但仅限部分值）
子项垂直位置不一致？优先用 align-self 覆盖 align-items
当多数项目要居中、个别要顶对齐或底对齐时，align-self 是更精准的控制方式。它作用于单个网格项，会覆盖容器级的 align-items 设置。
-
align-self可取值包括：start、end、center、stretch（默认）、baseline；注意baseline在 Grid 中行为较特殊，依赖字体基线而非内容高度，容易出人意料 - 若某子项设置了
align-self: stretch，但实际没撑满行高，大概率是因为该行没有明确高度（如未设grid-auto-rows或行高由内容撑开），此时 stretch 实际无效果 - 避免在同一个子项上同时写
margin: auto和align-self：前者在 Grid 中也能实现垂直居中，但两者逻辑冲突，align-self会优先生效
文字和图标垂直对齐错位？别只盯 align-items
当网格项里包含内联元素（比如 <span> 文字 + <i> 图标），即使整个项已用 align-self: center 居中，内部元素仍可能因 baseline 对齐而上下偏移。
- 对纯内联内容的网格项，可在其内部加
display: flex; align-items: center，比依赖 Grid 的垂直对齐更可控 - 慎用
vertical-align：它只对inline/table-cell元素有效，在 Grid 子项上无效（除非子项本身是 inline-level） - 如果子项是
img，默认是 inline 元素，底部会留空白间隙——加vertical-align: middle或设display: block更稳妥，这和 Grid 对齐无关，但常被混淆
align-self 在多行网格中表现异常？检查 grid-row 跨行设置
当某个子项用 grid-row: 1 / -1 跨越多行时，align-self 的参考基准不再是单行，而是它所占据的所有行组成的“轨道块”。这时 center 表示在整个跨行区域中居中，而非视觉上“看起来居中”。
立即学习“前端免费学习笔记（深入）”；
- 如果跨行后发现对齐偏高或偏低，先用
outline: 1px solid red检查该子项的实际渲染范围，确认是否真跨了预期的行数 - 避免对
grid-row: span 2的项使用align-self: baseline—— baseline 对齐在跨行场景下无明确定义，各浏览器行为不一致 - 需要“视觉居中”而非“轨道居中”时，可改用
place-self: center（等价于justify-self: center; align-self: center），它在跨行时表现更符合直觉
