justify-self 和 align-self 仅对 display: grid/inline-grid 容器的直系子元素生效，分别控制行内轴（列方向）和块轴（行方向）对齐，且优先级高于容器级 justify-items/align-items；若网格项无空余轨道空间或非直系子元素，则不生效。
justify-self 和 align-self 在单个网格项上怎么生效
这两个属性只对网格容器的直接子元素（即网格项）有效，且容器必须是 display: grid 或 display: inline-grid。如果父容器是 flex、block 或其他布局模式，justify-self 和 align-self 完全被忽略——连 warning 都不会报。
常见错误现象：justify-self: center 写了但没反应，大概率是因为父级没设 grid，或者目标元素被套了一层 wrapper（比如 <div><span>内容</span></div>，结果你给 span 加了 justify-self，但它的父级 div 才是网格项）。
- 确保目标元素是网格容器的**直系子元素**
- 检查父容器是否设置了
display: grid且未被其他样式（如display: contents）意外破坏网格上下文 -
justify-self控制**行内轴**（inline axis）对齐，即在列方向上的位置；align-self控制**块轴**（block axis），即在行方向上的位置
justify-self/align-self 与 justify-items/align-items 的优先级关系
单个网格项上的 justify-self 和 align-self 会覆盖容器级别的 justify-items 和 align-items 设置。这是“局部覆盖全局”的典型设计，和 CSS 中大多数继承/层叠逻辑一致。
但要注意：如果某项显式设了 justify-self: auto，它就退回到使用容器的 justify-items 值；而 auto 是默认值，所以不写等价于写了 auto。
立即学习“前端免费学习笔记（深入）”；
-
justify-self: center会让该项在所在网格区域的列方向居中，不管容器设的是justify-items: start - 如果容器设了
align-items: stretch（默认），但某项写了align-self: flex-start，那它就不会拉伸，而是顶部对齐 - 不要在同一个项上同时依赖
align-items和个别align-self来做不同行为——容易误判哪条规则在起作用
justify-self 不生效的几个隐蔽原因
最常被忽略的一点：justify-self 只在该项**有明确的网格轨道可对齐时**才起作用。如果网格容器只有一列，且该项跨了所有列（比如 grid-column: 1 / -1），那它已经占满整行，justify-self 就没地方“对齐”了——表现就是完全没变化。
另一个坑是 min-width: max-content 或 width: fit-content 类样式，它们会让元素宽度撑开，削弱 justify-self 的视觉效果。
- 确认该项所在的列轨道存在“空余空间”，比如容器有
grid-template-columns: 100px 1fr 100px，而该项只占中间1fr列 - 避免给网格项设
width: 100%或min-width: 100%，这会锁死宽度，让justify-self失去操作空间 - 用浏览器 devtools 检查该网格项的“computed”面板，确认
justify-self值确实被解析并应用，而不是显示为auto（说明被重置或无效）
align-self 在 grid-row 跨行时的行为差异
当一个网格项通过 grid-row 跨越多行（比如 grid-row: 2 / 4），align-self 依然只在它所占据的**那个网格区域的块轴方向**上生效，不是在整个容器高度里对齐。
也就是说，它对齐的参考系是“自己占的那几行组成的矩形区域”，不是整个网格容器。这点和 flex 中的 align-self 很像，但初学者常误以为它会相对于整个容器垂直居中。
- 如果想实现“容器内垂直居中”，应该用
place-items: center配合height: 100vh等整体控制，而不是依赖单个项的align-self -
align-self: center在跨两行的项上，会让内容在那两行高度之和的范围内居中，不是在容器中间 - 若需更精细控制（比如基线对齐），注意
align-self: baseline在网格中支持有限，部分浏览器可能回退到stretch
真正难的不是写对属性名，而是判断当前网格结构是否提供了可对齐的空间——多数失效问题，根源都在轨道定义和跨格行为没理清。
