CSSGrid对齐控制：align-items与justify-items详解

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS Grid中align-items与justify-items控制内容对齐》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

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 改成 text，它仍会水平居中（因 justify-items 对内联元素也生效），但垂直方向可能贴顶——因为 align-items 对内联元素的垂直对齐依赖 line-height 或父容器的 flex/grid 上下文，并非总是直观。

真正需要精确控制单个网格项时，优先用 align-self 和 justify-self，它们比容器级属性更直接、更少副作用。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSGrid对齐控制：align-items与justify-items详解》文章吧，也可关注golang学习网公众号了解相关技术文章。