CSS网格对齐方式_justify-items与align-items全局控制

justify-items 控制网格项在列方向上于各自单元格内的水平对齐，align-items 控制行方向上的垂直对齐；二者均不控制网格轨道分布或容器整体位置，且可被 justify-self/align-self 单独覆盖。

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，就会以该子项的设置为准。这是层叠逻辑，不是覆盖。

Visual Studio IntelliCode

微软VS平台的 AI 辅助开发工具

下载

• 例如容器设了 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 类比理解