在 Grid 布局中，让单个网格项靠右对齐应使用 justify-self: end；该属性控制项目在其所属单元格内沿行轴的对齐，不影响其他项，也不改变其所在列位置。
在 Grid 布局中，让单个网格项靠右对齐，最直接的方式就是用 justify-self 属性，它专门控制**单个项目**在当前网格单元（cell）内沿**行轴（inline axis）** 的对齐方式。
justify-self 的取值与作用
该属性默认继承自父容器的 justify-items，但可单独覆盖。常用值有：
- auto：使用父容器的 justify-items 值（默认是 stretch）
- start：左对齐（文本方向为 ltr 时）
- end：右对齐（ltr 下即靠右）✅
- center：居中
- stretch：拉伸填满整个单元格（默认行为）
实际写法示例
假设你有一个 3 列网格容器，只想让第 2 个子元素靠右：
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item-2 {
justify-self: end; /* 关键：让它在自己的格子里靠右 */
}注意对齐基准是“所在单元格”，不是整个网格容器
justify-self 不会让元素跑到其他列里，它只决定元素在自己被分配到的那个网格单元内的水平位置。比如：
- 如果某元素被
grid-column: 2 / 3分配到第 2 列，justify-self: end就让它紧贴该列的右侧边界 - 如果它跨了两列（如
grid-column: 1 / 3），justify-self: end会让它靠右贴在第 2 列的右边缘
和 justify-items、justify-content 的区别
别混淆这三个：
- justify-self：只作用于单个网格项，在其单元格内对齐（行轴）
- justify-items：设置所有子项的默认 justify-self 值（容器级）
- justify-content：对齐的是整个网格轨道（即所有列组成的整体），当网格总宽小于容器时才生效（类似 flex 的 justify-content）
想单独调某个元素，就用 justify-self —— 简洁、精准、不干扰其他项。
基本上就这些。用好 justify-self，控制单个格子内的对齐非常直接。
