justify-self用于控制单个网格项在单元格内的水平对齐方式，作用于具体网格项而非容器，支持start、end、center、stretch等值，可实现独立对齐；与justify-items（作用于所有项目）不同，仅在grid或flex布局中生效。
在 CSS Grid 布局中，justify-self 属性用于控制单个网格项在其所在网格单元格内的水平（行轴）对齐方式。通过它，你可以让某个特定的单元格内容独立于其他项进行对齐。
理解 justify-self 的作用范围
justify-self 作用于单个网格项（grid item），而不是整个网格容器。这意味着你可以为不同的单元格设置不同的对齐方式，实现灵活布局。
它只在直接设置了该属性的网格项上生效，且仅影响该元素在所在列轨道中的对齐表现。
可用值及其效果
justify-self 支持以下几个常用值：
立即学习“前端免费学习笔记（深入）”；
- start：元素在行轴起点对齐（通常是左侧）
- end：元素在行轴终点对齐（通常是右侧）
- center：元素在行轴方向居中对齐
- stretch：默认值，元素拉伸以填满整个单元格宽度（除非有固定宽度限制）
实际使用示例
假设你有一个网格容器，内部包含多个子元素，你想让其中一个单元格内容右对齐：
.grid-container {display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item-right {
justify-self: end;
}
.item-center {
justify-self: center;
}
在这个例子中，class 为 item-right 的元素会在其所在的列中靠右对齐，而 item-center 则会居中，其余未设置的项保持默认对齐方式。
与 justify-items 的区别
justify-items 是设置网格容器中所有项目的对齐方式，作用于容器本身。而 justify-self 是针对个别项目覆盖整体行为的方式。例如，容器设置了 justify-items: start，但某个项设置了 justify-self: center，那么该项就会居中，其余仍靠左。
基本上就这些。只要确保父容器是 grid 布局，然后在需要单独对齐的子元素上使用 justify-self 即可。不复杂但容易忽略的是，这个属性只在 grid 或 flex 的某些场景下有效，在普通块级元素中不会起作用。
