justify-self和align-self必须写在网格项（直系子元素）上，仅当父容器为display: grid/inline-grid且定义了网格轨道时生效；它们分别控制水平与垂直对齐，优先级高于容器级justify-items/align-items，取值包括start、end、center、stretch，默认stretch会拉伸填满轨道。
justify-self 和 align-self 必须写在子元素上
这两个属性只对网格项（grid item）生效，且只能加在子元素的 CSS 规则里，写在容器上或非直系子元素上完全无效。常见错误是把 justify-self: center 误写在 .container 上，结果毫无反应。
必须确保父容器已声明 display: grid 或 display: inline-grid，并且定义了至少一个轨道（比如 grid-template-columns: 1fr）。否则浏览器不会生成真正的网格上下文，justify-self 和 align-self 就像没写一样。
- 不生效的典型原因：父元素缺
grid-template-columns或grid-template-rows - 脱离网格流的元素（如
position: absolute、float、display: contents）也不支持这两个属性 - 如果同时用了
place-self，它会覆盖justify-self和align-self，二者别混用
justify-self 控制水平，align-self 控制垂直
命名很直白，但容易记反：justify-self 管行内轴（inline axis），默认就是水平方向；align-self 管块轴（block axis），默认就是垂直方向。这和 Flexbox 的轴向逻辑一致，但在 Grid 里作用对象是“单元格内的内容”，不是整行/整列。
取值都支持 start、end、center、stretch，其中 stretch 是默认值——所以如果你没设高度/宽度，又看到子元素被拉满，不是失效，而是它正在忠实地执行默认行为。
-
justify-self: start在中文 LTR 环境下 = 左对齐 -
align-self: end= 底部对齐（不是“结束列”，是当前格子的底部） -
self-start/self-end会参考元素自身的 writing-mode，日常中文场景基本等价于start/end
覆盖规则：子项优先级高于容器设置
justify-self 和 align-self 会直接覆盖容器上的 justify-items 和 align-items，但仅限当前子项。这是它们存在的唯一目的：精细化控制。
例如容器设了 justify-items: start; align-items: stretch;，你仍可以单独给某个按钮加 justify-self: end; align-self: center; 实现右对齐+垂直居中，其他项目照旧。
- 如果某子项只设
justify-self，align-self仍走容器的align-items值 - 多格合并的项目（用了
grid-area）受控范围是它所占的整个区域，不是单个单元格 - 当内容有固定尺寸（比如图片宽高明确），
stretch就不会拉伸，此时start/center才真正可见效果
实际微调常配合 margin: auto
单纯靠 align-self 或 justify-self 有时不够精确，尤其当需要“在剩余空间里居中”或“紧贴某一边留白”时。margin: auto 在 Grid 中有特殊行为：在对应轴向上，它会吸收剩余空间，实现更可控的居中或偏移。
比如一个固定高宽的图标想在格子里水平居中+底部对齐，可以：align-self: end; margin-left: auto; margin-right: auto;。注意这里 margin: auto 只在未被 justify-self 或 align-self 完全覆盖的维度才起效。
-
margin: auto在 Grid 中有效，但在 Flexbox 里需配合flex-direction才能跨轴生效 - 如果同时设了
justify-self: center和margin-left: auto，后者会被忽略——因为对齐已由justify-self明确接管 - 对齐 + margin 混合使用时，建议先确认该格子是否有足够剩余空间，否则
auto无处可分
stretch 掩盖了对齐变化。最容易被忽略的是——忘了删掉子元素自带的 margin 或 padding，导致视觉偏移，误以为对齐属性失灵。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
