justify-self 无效的主因是父容器未定义列轨道，需确保 grid-template-columns 有效且非空、容器有可测量宽度；子项需显式指定 grid-column 避免隐式跨列；替换元素应设 min-width: 0；display: contents 或 position: absolute 会使 justify-self 失效。
justify-self 没反应，先看父容器有没有列轨道
写了 justify-self: center 却没效果，90% 的情况不是属性写错了，而是父容器压根没生成可用的列轨道。CSS Grid 要求容器必须有明确的列定义（哪怕只有一列），否则浏览器不会为子项分配「可对齐的空间」。
常见错误包括：
-
display: grid但没设grid-template-columns或grid-auto-columns - 用了
grid-template-columns: none或空值（无效） - 容器宽度为
0、max-content且内容极窄，导致列轨道塌缩
验证方法：在开发者工具中检查 computed 样式，确认 grid-template-columns 解析后不为空，且容器本身有可测量的宽度（非 0px 或 fit-content 下的意外压缩）。
justify-self 在单列网格里“失效”的真实原因
当容器只有 grid-template-columns: 1fr，而某个子项又没显式指定 grid-column，它默认占满整列——此时没有「空余空间」供 justify-self 发挥作用，表现就是无论设 start 还是 end 都看不出变化。
这不是 bug，是设计使然：justify-self 对齐的是「所在轨道内的空余空间」，不是整个容器。解决路径很直接：
- 给该子项加
grid-column: 1 / 1（显式绑定到第一列，避免隐式跨列） - 或把容器改成多列，比如
grid-template-columns: 100px 1fr 100px，再让子项只占中间1fr列 - 若必须单列，改用
text-align控制内部文本对齐（仅限内联内容）
min-width 和替换元素会悄悄阻止 justify-self 生效
图片、按钮、输入框等替换元素（replaced elements）自带 min-width: auto，这会让它们拒绝被 justify-self: stretch 拉伸；而 justify-self: start/end/center 在它们宽度固定时也容易“看起来没动”。
典型现象：一张 200px 宽的图放在 1fr 列里，justify-self: center 不生效——其实是它已经靠左了，但列太宽，视觉上像没动。
关键修复动作：
- 对图片加
min-width: 0（解除默认最小宽度限制） - 配合
width: 100%让它真正响应justify-self: stretch - 对纯文本容器，检查是否被
white-space: nowrap锁死宽度
justify-self 和 display: contents / position: absolute 的冲突
这两个声明会让元素退出网格格式化上下文（grid formatting context），一旦脱离，justify-self 和 align-self 就彻底失效——连 warning 都不会报，调试时极难发现。
特别容易踩坑的场景：
- 用
display: contents包裹子项来“透传”样式，结果网格项变成其子节点，而你还在原位置写justify-self - 给网格项加了
position: absolute，它已不属于网格流，justify-self彻底失能 - 父容器用了
display: subgrid但上级没定义行/列轨道，subgrid 项无法获得对齐锚点
判断方式：在开发者工具中看该元素的 computed display 值是否仍为 block 或 inline（即未被 contents 吞掉），同时确认 position 是 static 或 relative。
真正卡住的时候，往往不是语法写错，而是网格上下文在某一层被悄悄破坏了。盯住 display: grid、grid-template-columns、min-width 和定位状态这四个点，比反复试 justify-self 的取值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
