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 - 目标元素不是直接子元素（比如中间嵌了 包裹层）
- 父级没定义列轨道（
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，否则只是“本格内靠右”。 - 父级没定义列轨道（
