align-self 仅在父容器为有效网格（含显式轨道定义）且元素为真实网格项时生效；否则因无轨道或脱离网格流而失效，其值仅控制项在自身网格区域内的块轴位置。
align-self 能直接覆盖父容器的 align-items，但前提是：它必须作用于真正的网格项，且父容器已构成有效网格轨道——否则完全不生效。
为什么写了 align-self: center 却没反应？
最常见原因是父容器缺失显式网格定义。即使写了 display: grid，若没设 grid-template-columns 或 grid-template-rows，浏览器不会生成实际轨道，align-self 就被忽略。
- ✅ 正确写法：
.container { display: grid; grid-template-columns: 1fr 1fr; } - ❌ 无效写法：
.container { display: grid; }（无轨道，align-self失效） - 检查元素是否脱离网格流：
position: absolute、float、display: contents都会让align-self失效
align-self 的取值和实际效果差异
它只控制网格项在**自身所占网格区域内的块轴（垂直）位置**，不是内容内部排版：
-
start：贴顶部（默认方向下等价于top） -
end：贴底部（注意：这会让整个盒子到底，但内部文字仍从顶开始渲染） -
center：在区域高度内垂直居中 -
stretch：拉伸填满整行高度（默认值，会忽略height设置） -
self-start/self-end：按该元素自身的 writing-mode 对齐（中文环境通常与start/end行为一致）
和 text-align、line-height 混用时的典型误区
很多人以为 align-self: end 就能让文字“紧贴单元格底部”，其实只是把整个 <div> 拉到了底部，文字本身仍在块级流顶部起始位置。
立即学习“前端免费学习笔记（深入）”；
- 若要文字真正靠底：需在子元素上额外加
display: flex; align-items: flex-end;或display: grid; align-content: end; -
text-align只影响水平对齐，对垂直无作用；line-height配合固定高可实现单行文字垂直居中，但不适用于多行 - 不要依赖
margin-top: auto来模拟align-self: end——它在 Grid 中行为不稳定，尤其当项未设高度时
和 place-self、justify-self 的协作边界
align-self 只管垂直，justify-self 管水平，二者互不干扰；而 place-self 是它们的简写，一旦使用就会同时覆盖两个方向：
-
.item { align-self: center; justify-self: end; }✅ 分开控制，清晰明确 -
.item { place-self: center end; }✅ 等价写法，但会覆盖掉之前写的align-self或justify-self - 若容器设了
align-items: stretch，又给某子项设align-self: center，那它就不会拉伸——这是预期行为，不是 bug
真正容易被忽略的是：当网格项设置了 grid-area 占据多行多列时，align-self 对齐的是它在整个所占区域内的块轴，而不是整个容器。这个区域范围得靠 grid-row/grid-column 显式看清楚，否则对齐基准会误判。
