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