CSS网格对齐：justify-items与align-items详解

本文深入解析了CSS Grid中justify-items与align-items两大对齐属性的本质作用与常见误区：它们并非控制整个网格容器的定位或轨道分布，而是精准作用于每个网格项在其所属单元格内部的水平（列方向）与垂直（行方向）对齐方式；二者作为全局默认值可被单个子项的justify-self/align-self覆盖，赋予精细控制能力；同时强调stretch行为受子项自身宽高限制、display: contents会导致失效等实战关键点，帮助开发者摆脱“用错属性实现居中”的惯性思维，真正掌握网格内元素的精确定位逻辑。

justify-items 控制的是网格项在列方向上的对齐

它影响的是每个 grid-item 在其所在**网格单元格（grid cell）内部**的水平对齐方式，只对直接子元素生效，不是整个网格容器的“整体居中”。常见误解是把它当 justify-content 用——后者管的是整个网格轨道（tracks）在容器里的分布。

• justify-items: start：所有子项靠左贴齐单元格左边缘（默认值）
• justify-items: center：子项水平居中于各自单元格内（不是整个网格居中）
• justify-items: stretch：子项拉伸填满单元格宽度（最常用，也是默认行为，除非子项有固定宽）
• 若子项设置了 width 或 max-width，stretch 就不会生效；此时 center 才真正起作用

align-items 控制的是网格项在行方向上的对齐

和 justify-items 是垂直镜像关系：它决定每个子项在其单元格内的**垂直对齐位置**。同样不控制行轨道间距，也不影响容器外边距。

• align-items: start：贴单元格顶部（默认）
• align-items: center：垂直居中于单元格内
• align-items: end：贴底部
• align-items: stretch：拉伸填满单元格高度（前提是子项没设 height 或 max-height）
• 注意：如果网格容器本身高度未定义（比如靠内容撑开），stretch 可能看起来没效果——因为单元格高度就是内容高度

justify-items 和 align-items 不会覆盖单个子项的 justify-self / align-self

这两个全局属性是“默认值”，一旦某个子项显式设置了 justify-self 或 align-self，就会以该子项的设置为准。这是层叠逻辑，不是覆盖。

• 例如容器设了 justify-items: center，但某个 grid-item 写了 justify-self: start，那它就靠左，其余仍居中
• justify-self 和 align-self 的可选值和全局属性完全一致，且支持 unset 回退到全局值
• 不要试图用 justify-items 强制统一所有子项对齐——如果有例外项，优先用 justify-self 单独调，更可控

浏览器兼容性与 display: contents 的干扰

这两个属性在现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都稳定支持，但有个隐蔽坑：display: contents 会让子元素“脱离文档流但保留样式”，此时 justify-items 和 align-items 对它**完全失效**——因为该元素已不算网格项了。

• 检查是否误用了 display: contents 在网格直接子元素上
• 如果只是想隐藏容器盒但保留子项参与网格布局，用 visibility: hidden + grid-column/grid-row 显式定位更安全
• Flexbox 中没有对应 justify-items 的全局属性，别拿 flex 的 justify-content 类比理解

实际写的时候最容易漏掉的，是忘了子项自身的尺寸限制会直接废掉 stretch 行为；还有就是把 justify-items 当成让整个网格居中的开关——它只管“格子里怎么放”，不管“格子本身在哪”。

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