justify-self: end 在 grid 中生效需满足三条件：父容器为 display: grid/inline-grid、元素是直接子项、父级定义了列轨道；否则被忽略。
justify-self: end 在 Grid 中是否生效？
只写 justify-self: end 通常无效——它依赖于父容器是 Grid 容器，且该元素本身是显式网格项（即直接子元素），同时父级必须设置了 display: grid 或 display: inline-grid。如果父级用的是 Flex、Block 或未定义网格轨道，justify-self 完全被忽略。
为什么 justify-self: end 没反应？常见原因
多数情况下不是语法错，而是上下文不满足：
- 父容器没设
display: grid，或用了display: flex - 目标元素不是直接子元素（比如中间嵌了
<div> 包裹层）<li>父级没定义列轨道（<code>grid-template-columns），导致单列隐式布局，justify-self失去参考基准 - 元素设置了
justify-self: stretch（默认值）但被其他规则覆盖，而end又被浏览器旧版本忽略（如 Safari end 支持不稳定）
正确写法与兼容性处理
推荐显式声明列轨道，并用 justify-self: end 配合 margin-left: auto 降级：
.grid {
display: grid;
grid-template-columns: 1fr 200px;
}
.item {
justify-self: end;
/* 兼容老浏览器 */
margin-left: auto;
}注意：justify-self: end 的行为取决于 direction 和 writing-mode。若父级设了 direction: rtl，end 实际指向左；需要稳定右对齐，优先考虑 justify-self: right（但注意：CSS 规范中 right 不是标准值，仅部分浏览器支持，end 才是规范写法）。
立即学习“前端免费学习笔记（深入）”；
替代方案：用 justify-items 或 place-self 更省事
如果所有网格项都要右对齐，别逐个写 justify-self，直接控制容器：
- 全部子项右对齐：
justify-items: end（作用于整个网格容器） - 单个元素需单独控制，且要兼顾垂直对齐：
place-self: end end（等价于justify-self: end; align-self: end） - 避免在响应式中失效：确保列轨道足够宽，否则
end对齐可能被截断或表现异常
真正容易被忽略的是：网格线编号和 end 的关系——justify-self: end 总是对齐到其所在网格区域的**右侧边界**，不是整个容器右边缘。如果想贴着容器右边，得让它跨到最后一个列线，例如 grid-column: -1 / -1 配合 justify-self: end，否则只是“本格内靠右”。
