justify-self 仅控制单个网格项在其所在单元格内的行内轴对齐，与“最后一行”无关；其生效需满足：元素为网格容器直接子元素，且所在列轨道存在空余空间。
justify-self 对最后一行元素根本不起作用
它只管单个网格项在自己所在单元格内的行内轴对齐，和“最后一行”这个概念完全无关。如果你发现给最后一行的子元素加了 justify-self: end 却没反应，大概率是误用了属性层级——justify-self 不处理行级分布逻辑，也不感知“哪一行是最后一行”。
真正影响最后一行对齐的是 justify-content 和 grid-template-rows
最后一行的水平对齐表现，取决于整个网格轨道块（即所有列组成的整体）是否还有剩余空间：
- 如果容器宽度 > 所有列宽之和，
justify-content才会生效，此时可设justify-content: space-between或justify-content: end让整行右移 - 如果用了
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，列会自动撑满容器，justify-content失效——这不是 bug，是设计使然 - 若想强制最后一行右对齐且不拉伸其他行，得配合
justify-items: end+ 显式控制每项的justify-self: auto（退回到继承值），再用margin-left: auto推最后一项到右侧
想让最后一行某个元素靠右？用 align-self + justify-self 组合
比如一个卡片列表，最后一张卡片的“操作按钮”需贴右显示：
- 确保按钮是网格容器的直系子元素（不是嵌套在卡片内部的 div 里）
- 给按钮加
justify-self: end—— 它会在自己被分配到的那列单元格内右对齐 - 如果按钮跨列（如
grid-column: 1 / -1），justify-self无效，必须改用margin-left: auto - 注意
writing-mode或direction: rtl会翻转end的含义：在direction: rtl下，justify-self: end实际是左对齐
常见失效原因：空余空间不足或非直系子元素
justify-self 要起效，必须满足两个硬性条件：
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须是
display: grid容器的**直接子元素**；中间多一层 wrapper 就彻底失效 - 该元素所在的列轨道必须有**空余空间**——比如
grid-template-columns: 100px 1fr 100px中，若它只占中间1fr列，才有地方右对齐；若它grid-column: 1 / -1占满整行，则无空间可对齐 -
min-width: max-content、width: fit-content或内容过长导致元素撑满单元格，也会让justify-self视觉上“消失”
justify-self 从不根据位置动态生效。它只响应你显式加在某个元素上的声明，且效果严格受限于其所在单元格的空间与方向上下文。 
