align-content 不生效的三大原因：容器非 grid 显示、交叉轴无剩余空间、轨道数少于 2；它仅控制多行/列轨道间的分布，单行时无效，需用 align-items 控制子项对齐。
align-content 不生效？先看容器有没有“多余空间”
它只在容器交叉轴方向有剩余空间时才起作用。比如默认 grid-auto-flow: row，交叉轴就是垂直方向，此时 align-content 要生效，容器必须有明确高度（height 或 min-height），且这个高度要大于所有行加起来的总高度。否则浏览器会把容器高度收缩到刚好包裹内容，没有空间可分配，align-content 就完全没效果。
常见错误现象：align-content: center 写了但子项还是贴顶；开发者工具里 computed 的 height 和 grid-template-rows 总和相等，差值为 0。
-
height: auto或未设高 → 必然失效 - 即使写了
grid-template-rows: repeat(3, 100px)，若容器height: 300px，也无剩余空间，align-content仍不生效 - 临时加
border: 1px solid red和height: 400px，能快速排除尺寸不可见问题
单行网格下 align-content 根本不干活
align-content 只管“多行轨道之间的分布”，不是给单个子项用的。如果 grid-template-rows 只定义了一行（比如 100px），或 grid-auto-rows 没触发自动创建新行（内容太少），那整个容器就只有一行轨道，align-content 直接被忽略。
想确认是否真有多行：打开 Elements 面板，看 grid overlay —— 如果只亮一条横线，就是单行。
- 用
grid-auto-rows: minmax(80px, auto)+ 多个子项，更容易触发多行 - 想控制单行内子项的垂直对齐，该用
align-items，不是align-content - 删掉所有
align-self，再试align-content，避免子项覆盖干扰
主轴方向变了，align-content 管的轴也跟着变
justify-content 管主轴（默认水平），align-content 管交叉轴（默认垂直）。但主轴方向由 grid-auto-flow 决定：设成 column 后，主轴变垂直，交叉轴就变成水平，这时 align-content 控制的是“多列之间的左右分布”，而不是上下。
- 调试时先固定
grid-auto-flow: row，避免方向混淆 - 响应式中改了
grid-auto-flow却没同步调整对齐属性，就会突然失效 - 想让多列之间留空，得用
justify-content（主轴）；想让多行之间留空，才轮到align-content（交叉轴）
容易被忽略的隐藏干扰项
现代浏览器基本都支持 align-content，但 iOS Safari ≤ 9.3、部分 Android WebView 有 bug；更常见的是被其他样式悄悄覆盖——比如父级 flex 容器的 align-items 透传、子项的 align-self 优先级更高，或者容器本身是 display: inline-grid 导致尺寸计算异常。
- 避免
inline-grid，改用grid，防止尺寸不可控 - 检查 computed 样式里的
display，确认确实是grid，不是block或flex - 父元素若被 JS 动态修改过
display，或被 reset.css 强制设为display: block !important，也会让属性失效
display: grid、交叉轴有富余空间、轨道数 ≥ 2。少一个，align-content 就只是 CSS 文件里一行安静的代码。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
