align-content仅作用于多行网格中交叉轴的剩余空间分配，单行时无效；需容器有富余高度且至少两行轨道才生效，否则应使用align-items控制单行子项对齐。
align-content 只管“多行轨道之间的空隙”
align-content 的设计目标不是居中内容，而是分配**多行网格轨道（grid rows）在交叉轴上的剩余空间**。它只在容器交叉轴方向有富余空间，且存在**两个或以上显式/隐式行轨道**时才起作用。单行网格根本没有“行与行之间”的空间可分配，所以该属性直接被忽略。
单行场景下该用 align-items，不是 align-content
想让单行网格里的子项垂直居中，必须用 align-items: center——但它生效的前提是：display: grid 已设置，且容器在交叉轴（默认为垂直方向）有可测量高度。
- 容器没设
height或min-height→ 计算高度为 0 →align-items无参照，看起来“没效果” - 子项本身高度为
auto且未撑开行高 → 实际可用空间仍不足 - 若子项内还有嵌套内容（如文字包在
<p>里），align-items只控制该子项盒子位置，不控制内部文字对齐
怎么快速验证是不是真有多行？
打开浏览器开发者工具的 Grid overlay（Elements 面板 → Styles → 点击 grid 图标），观察横线数量：
- 只亮一条横线 → 单行 →
align-content必然无效 - 亮两条及以上 → 多行 → 此时再检查容器高度是否大于所有行高总和
- 临时加
grid-auto-rows: minmax(60px, auto)+ 5 个子项，更容易触发多行
真正卡住的地方：容器根本没“资格”让 align-content 工作
即使写了 align-content: center，只要容器交叉轴没有富余空间（比如 height: auto、或 height 刚好等于 grid-template-rows 总和），它就完全不参与布局计算。这时候调样式不如先看 computed height 和 grid row 总高差值——差值为 0，就别折腾 align-content 了。
立即学习“前端免费学习笔记（深入）”；
