align-content生效需满足三条件：grid容器、多行轨道、交叉轴有剩余空间；它控制所有行整体分布，非单个格子，且不适用于table元素。
align-content 要生效，必须满足三个硬性条件：容器是 Grid 布局、存在多行轨道、交叉轴方向有剩余空间。它不控制单个格子或内容，而是把所有行当作一个整体来安排位置。
必须设置固定高度或预留垂直空间
容器需有明确的 height（如 height: 500px）或通过 min-height + 内容不足来制造空隙。如果用 height: auto 或内容刚好填满，align-content 就不会起作用。
- 推荐写法：height: 400px; grid-template-rows: 80px 80px;（两行共 160px，剩 240px 空间）
- 避免写法：height: auto; 或 grid-template-rows: 1fr 1fr;（可能自动撑满，无剩余空间）
确保是多行布局
单行网格没有“分布”概念，align-content 对单行无效。必须有至少两行轨道，可通过以下任一方式实现：
- grid-template-rows: 100px 100px;
- grid-auto-rows: 90px; 配合足够多的子元素自动换行
- repeat(3, 120px);
选择合适的取值并理解实际效果
常用值直接作用于“所有行组成的整体”，不是每个单元格：
- center：整体垂直居中，上下留白相等
- space-between：首行贴顶、末行贴底，中间行等距分布
- space-around：每行上下分配相同空白，视觉更宽松
- stretch：仅当行高允许（如 auto 或 minmax(0, 1fr)）时拉伸填满容器
- start / end：默认顶部对齐；end 即全部下压到底部
别和 align-items 混用或误配容器
align-content 和 align-items 完全不同层级：
- align-items 控制每个子项在自己单元格内的垂直对齐（比如让文字在格子里居中）
- align-content 控制所有行在容器里的垂直分布（比如三行一起往上挪或居中）
- 表格元素（
<table>）不支持 align-content，必须改用 <font color="red">display: grid</font> </table>
