justify-items 不生效的根本原因是父容器未被识别为 Grid 容器，仅当 display 为 grid 或 inline-grid 时才有效；需检查 computed display、确保子项为直接后代、注意 justify-self 覆盖逻辑及 IE11 兼容限制。
justify-items 不生效，大概率是父容器根本没被识别为 Grid 容器
这个属性只在 display: grid 或 display: inline-grid 的元素上起作用。如果你写了 justify-items: center 却没效果，先打开开发者工具，检查该父元素的 computed display —— 如果显示的是 block、flex 或其他值，那它就不是 Grid 容器，属性自然被忽略。
- 常见误写：
display: -ms-grid（IE10/11 专用）不触发现代justify-items，需搭配display: grid双写才兼容 - 常见遗漏：父元素被 JS 动态修改了
display，或被更高优先级 CSS 覆盖（比如某个 reset.css 把所有容器设为了display: block !important） - 嵌套干扰：父元素是 Grid，但你把
justify-items写在了它的父级（比如 body 或 wrapper），而真正要控制的子项并不直属于那个 wrapper
子元素不是直接子项，justify-items 就不会管它
justify-items 只影响 Grid 容器的**直接子元素**（即 grid items）。如果中间多套了一层 <div>，哪怕只是个空壳，那个壳就成了 grid item，而你真正想对齐的内容只是它的后代——这时 justify-items 对它完全无效。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：在开发者工具中选中目标内容，往上逐级看「Elements」面板，确认它是否紧贴在带
display: grid的元素之下 - 典型场景：Vue/React 中用
<template>或 Fragment 包裹子节点，实际渲染后产生一层不可见的包裹节点 - 修复方式：要么把
justify-items移到真正的父容器上，要么让目标元素成为该容器的直接子节点（删掉多余 wrapper）
justify-items 和 justify-self 混用时，优先级容易被误解
justify-self 是写在子元素上的，会覆盖容器级的 justify-items。但它的值 auto 并不是“恢复默认”，而是“继承 justify-items 的值”；而 justify-items 的默认值是 stretch，不是 start。
- 现象：设置了
justify-items: center，但某个子项加了justify-self: auto，结果它却靠左了 → 实际是它继承了center，但该子项本身有width或max-width限制，导致拉伸失败，视觉上像没居中 - 调试建议：hover 查看该子项的 computed
justify-self，确认最终生效的是哪个值 - 注意：IE11 完全不支持
justify-items和justify-self，若需兼容，只能退回到align-items+ 单行布局，或改用margin: auto（但会破坏 Grid 对齐逻辑）
真正卡住人的地方往往不在语法写错，而在「谁是容器」「谁是子项」「谁在继承谁」这三层关系没理清。浏览器不会报错，只会静默忽略——所以别猜，直接看 computed 样式。
