align-items控制网格项在交叉轴（列方向）的垂直对齐，justify-items控制主轴（行方向）的水平对齐；二者均作用于容器内所有网格项，但可被align-self/justify-self覆盖，且stretch仅对块级可伸缩元素生效。
align-items 控制网格项在交叉轴上的对齐方式
align-items 作用于整个网格容器，影响所有直接子元素（即网格项）在**交叉轴**（cross axis）上的对齐。在 grid-template-rows 定义行高时，交叉轴是水平方向（即列方向），此时它控制的是网格项在单元格内的**垂直对齐**。
- 常见取值：
start、end、center、stretch（默认）、baseline - 当某网格项本身有固定高度或设置了
align-self，会覆盖align-items的效果 - 如果网格项是块级元素且未设高度，
stretch会让它填满单元格高度；但若内容是内联元素（如纯文本），stretch不起作用，需配合min-height或显式高度
justify-items 控制网格项在主轴上的对齐方式
justify-items 同样作用于容器，影响所有网格项在**主轴**（main axis）上的对齐。主轴由 grid-auto-flow 和显式行列定义共同决定：默认 grid-auto-flow: row，主轴就是水平方向（即行方向），此时它控制的是网格项在单元格内的**水平对齐**。
- 取值与
align-items相同：start、end、center、stretch（默认）等 -
stretch是默认行为，但仅对**块级可伸缩元素**生效；inline元素或设置了width的元素不会被拉伸 - 它不控制网格轨道（grid tracks）之间的间距，那是
gap或justify-content的职责
align-items 和 justify-items 的常见误用场景
这两个属性容易和 align-content/justify-content 混淆，关键区别在于：后两者控制的是**整个网格轨道（多行/多列）在容器内的分布**，而 align-items/justify-items 控制的是**单个网格项在其所在单元格内的对齐**。
- 当你发现设置
align-items: center没有效果，先检查：网格项是否设置了align-self？是否为内联元素？单元格是否有足够高度？ - 使用
justify-items: center后文字没居中，大概率是因为该网格项是span或div但内部只有文本——此时需确保该元素是块级且未设固定宽度，否则stretch不触发，center才会生效 - Flexbox 中的
align-items行为与 Grid 中一致，但 Flexbox 没有justify-items—— 这是 Grid 特有属性
一个验证对齐行为的最小示例
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 60px 60px;
align-items: center;
justify-items: center;
border: 1px solid #ccc;
}
.grid > div {
background: #e0f7fa;
border: 1px solid #00bcd4;
}
上面代码会让每个 div 在各自 100×60 的单元格中**水平垂直居中**。但如果把其中一个 div 改成 <span>text</span>，它仍会水平居中（因 justify-items 对内联元素也生效），但垂直方向可能贴顶——因为 align-items 对内联元素的垂直对齐依赖 line-height 或父容器的 flex/grid 上下文，并非总是直观。
立即学习“前端免费学习笔记（深入）”；
真正需要精确控制单个网格项时，优先用 align-self 和 justify-self，它们比容器级属性更直接、更少副作用。
