justify-self: end 仅在元素所占网格区域存在空余空间时生效，否则无效；它对齐的是自身网格区域边界而非容器边缘，需确保直系子元素、明确轨道空间且无 margin 干扰。
justify-self 不是“让元素跑到右边去”的万能开关，它只在有空余空间时才起作用——没空间，写了也白写。
为什么 justify-self: end 没反应？
最常见原因不是语法错，而是它根本没对齐空间可操作：
- 父容器只有一列（比如
grid-template-columns: 1fr），且该元素占满整行（grid-column: 1 / -1）→ 左右已贴死，justify-self无处发力 - 元素被包在一层 wrapper 里（如
<div><p class="target">...</p></div>），但justify-self只认直系子元素，p不是网格项 - 元素设了
width: fit-content、min-width: max-content或固定宽高 → 自身撑开，吃掉单元格内剩余空间 - 同时写了
margin-left: auto→ CSS 规范强制忽略justify-self，不报错、不提示，直接静默失效
justify-self 的对齐基准到底是哪？
它永远只对齐到“自己所占网格区域的边界”，不是整个容器边缘：
- 若元素仅占第 2 列（
grid-column: 2 / 3），justify-self: end就贴紧第 2 列右侧 - 若跨两列（
grid-column: 1 / 3），justify-self: end贴的是第 2 列右边界，不是容器最右端 - 想贴容器右边缘？别用
justify-self，改用margin-left: auto（前提是没其他干扰 margin）
怎么确认它真生效了？
别靠肉眼猜，用 DevTools 看 computed 样式：
- 检查父容器 computed 中
display是否为grid或inline-grid - 看目标元素的
justify-self值是否显示为end（而非被覆盖成auto或stretch） - 对比元素
width和所在网格单元格宽度（Elements 面板 → Layout → Grid → hover 对应格子）；差值大于 0 才有对齐余量 - 删掉所有
margin相关声明再试一遍，排除 automargin 干扰
align-self 一样，只在直系子元素 + 明确轨道空间 + 无 automargin 这三个条件同时满足时，才稳定可控。少一个，就可能“看起来没动”。 
