justify-self不生效的首要原因是缺乏对齐空间：当网格项占满所在列轨道（如grid-column: 1 / -1且仅一列）时，无空余空间可对齐；还需确保父容器为display: grid、目标为直系子元素、未设冲突的width/min-width及margin:auto。
justify-self 不生效？先确认它有没有“对齐空间”
很多所谓“抖动”其实是视觉错觉：元素没动，但你预期它该动——结果发现 justify-self: end 写了却没反应。最常见原因是该项所在的列轨道**没有空余空间可对齐**。比如容器只有 grid-template-columns: 1fr，而元素又占满这唯一一列（grid-column: 1 / -1），那它已经贴满左右边界，justify-self 就无从下手。
检查方法很简单：在开发者工具里看该元素的 computed width 和所在网格单元格的宽度是否一致。如果相等，说明没空间；如果明显小于单元格宽度，再排查其他干扰项。
- 确保父容器是
display: grid或display: inline-grid，且未被display: contents破坏上下文 - 确认目标元素是网格容器的**直系子元素**，没被中间 wrapper 挡住
- 避免给该元素设
width: fit-content、min-width: max-content或固定宽高，这些会撑开自身，吃掉对齐余量
justify-self 和 margin: auto 冲突时谁赢？margin 赢，且静默失效
这是抖动类问题里最隐蔽的坑：justify-self: end 明明写了，但在某些浏览器下偶尔有效、偶尔无效。大概率是你同时写了 margin-left: auto —— CSS 规范明确要求：当某轴存在 automargin 时，对应的 justify-self 或 align-self 值会被直接忽略，连 warning 都不抛。
实际表现就是：元素有时靠右，有时居中，取决于渲染时机或父轨道是否“刚好有空”。这不是 bug，是规范行为。
- 想用
justify-self控制水平位置，就删掉所有margin相关声明（尤其是auto） - 想用
margin: auto居中，就别写justify-self，并确保该元素所在轨道没被其他项撑满（否则 automargin 无法生效） - 二者混用等于主动放弃控制权，调试时优先清空 margin 再验证
跨列元素对齐“偏移”，其实是 justify-self 作用域理解错了
当一个元素用了 grid-column: 1 / 3 跨两列，再设 justify-self: end，它不会跑到第 3 列右边去，而是紧贴**自己所占区域的右边缘**——也就是第 2 列的右侧边界。如果你预期它贴整个容器右边缘，那说明你混淆了“单元格内对齐”和“容器级定位”。
这种错位感常被误认为“抖动”，其实是对齐基准理解偏差。真正需要贴容器右边缘时，justify-self 不是合适工具，该换思路：
- 用
margin-left: auto（前提是没其他干扰 margin） - 把该元素单独提一层，用外层 grid 的
justify-content: end控制整行轨道位置 - 改用
place-self: center end（等价于justify-self: end; align-self: center），但依然只作用于其跨列区域内部
IE11 或旧版 Safari 下 justify-self 失效？不是兼容性问题，是漏写了 display
justify-self 在 IE11 中确实不支持，但现代浏览器（Chrome/Firefox/Safari ≥ 10.1）都已完整支持。如果你在 Safari 15+ 或 Chrome 90+ 里看到失效，99% 不是兼容性问题，而是漏掉了关键前提：父容器必须有明确的 display: grid，且不能被后续样式覆盖。
典型陷阱是用 CSS-in-JS 或预处理器生成样式时，display 被条件编译掉，或者被 !important 后续规则顶掉。computed 样式里如果显示 display: block，那 justify-self 就彻底失效，连尝试对齐的机会都没有。
真要兼容 IE11，得降级用 margin-left: auto + 固定宽度，或改用 Flexbox 布局——但别归咎于 justify-self 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
