justify-self 必须写在 grid 容器的直系子元素上，父容器设置无效；父容器需为 display: grid，子元素必须是直接网格项且所在轨道有空余空间，否则属性静默失效。
justify-self 不是父容器的属性，它只作用于网格容器的直系子元素——写在父容器上完全无效。
justify-self 必须写在子元素上，不是父容器
很多人把 justify-self 误当成类似 justify-content 的容器级属性，直接写在父容器 CSS 里。但规范明确：它只对 display: grid 容器的**直系子元素**生效，且该子元素必须是网格项（grid item）。父容器上声明 justify-self: center，浏览器会直接忽略，DevTools 中也看不到该声明被解析。
- ✅ 正确写法：
.child { justify-self: center; } - ❌ 错误写法：
.parent { justify-self: center; }（无任何效果） - 父容器该用的是
justify-items（批量控制所有子项）或justify-content（控制整行轨道在容器内的分布）
父容器没设 display: grid，justify-self 就是废代码
即使你把 justify-self 写在了子元素上，如果它的父容器不是 display: grid 或 display: inline-grid，这个属性照样静默失效——不报错、不警告、不渲染。
- 常见干扰项：
display: contents会让父容器退出网格上下文，子元素变“孤儿”，justify-self失效 -
position: absolute也会让子元素脱离网格流，失去所有网格对齐能力 - 验证方法：在 DevTools 中检查父元素的 computed
display值，确认为grid或inline-grid
子元素不是直系子项，justify-self 就被跳过
如果目标元素被包在一层 wrapper 里（比如 <div class="wrapper"><p class="target">内容</p></div>），而你给 .target 写了 justify-self，那它根本不是网格项——真正的网格项是 .wrapper，.target 只是普通块元素，属性被丢弃。
- 检查 Elements 面板中目标元素是否直接挂在 grid 容器下
- 若必须嵌套，要么把
justify-self移到 wrapper 上，要么让 wrapper 也参与网格布局（如设display: contents，但注意兼容性和副作用） -
display: contents虽能让 wrapper “消失”，但它会使子元素继承父网格上下文——前提是父容器确实是 grid
写了 justify-self 却没变化？大概率是没空间可对齐
justify-self 对齐的是“所在网格区域内的空余空间”，不是整个容器。如果子项占满整列（例如单列 grid-template-columns: 1fr + 默认 grid-column: 1 / -1），左右已贴死，justify-self: center 就无处发力。
- 用 DevTools Layout 面板 hover 对应网格格子，看单元格宽度和元素实际 width 是否一致；差值 > 0 才有对齐余量
- 显式指定
grid-column: 1 / 1防止隐式跨列 - 替换元素（如
<img>）需加min-width: 0才能响应justify-self: stretch或居中行为 -
margin-left: auto会静默覆盖justify-self，二者别混用
真正卡住人的地方，往往不是语法写错，而是没意识到 justify-self 的生效链条有多苛刻：父容器得是 grid、目标得是直系子项、得落在明确列轨道里、得有空余空间、还得没被 margin 或 min-width 暗中截断——少一环，就“看起来没动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
