justify-self 仅对 Grid 直系子元素且位于明确列轨道内生效；若嵌套、父非 grid、脱离网格流或无空余空间，则静默失效；margin: auto 会覆盖 justify-self；替换元素需设 min-width: 0 才能正常响应。
justify-self 写了但没反应，先看它是不是在 Grid 轴线上
justify-self 只对 Grid 容器的**直系子元素**生效，且该元素必须落在明确的列轨道（column track）内。如果它被 wrapper 包了一层、或父容器不是 display: grid，浏览器会直接忽略该声明——不报错，也不渲染。
常见失效场景包括：
- 目标元素嵌套在另一个
div里，实际是孙子节点，不是网格直系子项 - 父容器用了
display: contents或display: inline-grid但未显式定义列（grid-template-columns为空或none） - 父容器设置了
position: relative但子项用了position: absolute，导致脱离网格流
验证方法：在 DevTools 中选中该元素，查看 computed 样式里是否有 justify-self 条目；如果没有，说明它根本不在 Grid 轴线上，属性已被静默丢弃。
justify-self: center 看起来没动，大概率是没空隙可对齐
justify-self 对齐的是「所在单元格内的主轴空余空间」，不是整个容器。当子项占满整列（比如只有一列 grid-template-columns: 1fr，又没写 grid-column），它左右已贴死，justify-self: center 就无从下手。
立即学习“前端免费学习笔记（深入）”；
解决路径很具体：
- 给该子项加
grid-column: 1 / 1，显式绑定到第一列，避免隐式跨列 - 把容器改成多列，例如
grid-template-columns: 100px 1fr 100px，再让子项只占中间列 - 若必须单列且仅需文本居中，改用
text-align: center（仅限内联内容）
注意：grid-column: 1 / -1 在单列容器里等价于占满，此时任何 justify-self 都无效。
justify-self 和 margin: auto 同时存在？后者会静默覆盖前者
CSS 规范明确规定：只要某轴上出现 margin-left: auto 或 margin: auto，对应方向的 justify-self 值就会被直接忽略——不警告、不报错、不提示，DevTools 里可能还显示为 end，但实际不生效。
典型现象是“有时靠右、有时居中”，其实是渲染时机或轨道宽度波动触发了 automargin 的条件判断。
调试建议：
- 删掉目标元素所有
margin相关声明，再单独测试justify-self - 想用
margin: auto居中，就别写justify-self，并确保该子项所在列轨道有剩余空间（其他项没把它挤满） - 在 DevTools 的
computed面板 hover 查看justify-self，确认最终解析值是否被覆盖成auto
图片、按钮这类替换元素会让 justify-self 表现异常
<img>、<input>、<button> 是替换元素（replaced elements），自带 min-width: auto，这会让它们拒绝被 justify-self: stretch 拉伸；而 justify-self: start/end/center 在它们宽度固定时也容易“看起来没动”。
比如一张 200px 宽的图放在 1fr 列里，justify-self: center 其实生效了，但它只是在 200px 宽度基础上居中——而列可能宽达 800px，视觉上就像没动。
可行解法：
- 给替换元素加
min-width: 0，解除默认最小宽度限制 - 用
width: fit-content+justify-self: center组合控制尺寸与对齐 - 极端情况可设
display: contents（注意语义丢失）或position: absolute（但会彻底脱离网格流）
真正难调的从来不是语法，而是你没意识到：justify-self 的作用域只到单元格边界，且它的行为高度依赖书写模式、容器尺寸、子项类型三者共同约束。
