justify-self 仅控制单个网格项在其所在单元格内的行内轴对齐，与“最后一行”无关；其生效需满足：元素为网格容器直接子元素，且所在列轨道存在空余空间。

justify-self 对最后一行元素根本不起作用

它只管单个网格项在自己所在单元格内的行内轴对齐，和“最后一行”这个概念完全无关。如果你发现给最后一行的子元素加了 justify-self: end 却没反应，大概率是误用了属性层级——justify-self 不处理行级分布逻辑，也不感知“哪一行是最后一行”。

真正影响最后一行对齐的是 justify-content 和 grid-template-rows

最后一行的水平对齐表现，取决于整个网格轨道块（即所有列组成的整体）是否还有剩余空间：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 如果容器宽度 > 所有列宽之和，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 视觉上“消失”

最常被忽略的一点：Grid 中没有“最后一行元素”这个选择器，justify-self 从不根据位置动态生效。它只响应你显式加在某个元素上的声明，且效果严格受限于其所在单元格的空间与方向上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！