align-self: start 未生效最常见的原因是父容器未启用 Grid 布局（需 display: grid/inline-grid），或目标元素非直系网格子项、被 float/absolute/display: contents 脱离格式化上下文；它仅作用于交叉轴（垂直方向），且不接受 top 值，必须用 start。
为什么 align-self: start 没生效？
最常见原因是父容器没启用 Grid 布局，或者没设置 align-items 的默认值干扰了单个项。只有当父元素是 display: grid 或 display: inline-grid 时，align-self 才起作用。如果父容器用了 align-items: center 或 stretch（默认值），它会作为 fallback 影响未显式设置 align-self 的子项，但不会覆盖已设为 start 的项——除非你误写了选择器、或该网格项被其他规则（比如 margin、padding、transform）干扰了布局流。
正确写法：只对目标网格项加 align-self: start
不需要改父容器的 align-items，直接在要对齐顶部的那个网格项上设置即可。注意：它只控制**交叉轴**（即 column 方向的垂直对齐），所以前提是网格容器的 grid-template-rows 有足够高度，否则“顶部”没意义。
.item-top {
align-self: start;
}
常见错误：
- 写成
align-self: top（CSS 中没有top值，必须用start） - 目标元素不是直系网格子项（比如中间嵌套了 div），那它就不是网格项，
align-self无效 - 用了
float、position: absolute或display: contents，这些会让元素脱离网格格式化上下文
和 justify-self 的区别别搞混
align-self 控制的是**交叉轴**对齐（Grid 容器主轴为 row 时，交叉轴就是 column，即垂直方向）；而 justify-self 控制**主轴**对齐（水平方向）。如果你发现元素没靠左/靠右，不要调 align-self，那是 justify-self: start 的事。
立即学习“前端免费学习笔记（深入）”；
简单记：
-
align-→ cross axis → 垂直方向（对齐顶部/底部/center） -
justify-→ main axis → 水平方向（对齐左/右/center）
兼容性与替代方案
align-self: start 在现代浏览器中支持良好（Chrome 57+、Firefox 45+、Safari 10.1+），但 IE 完全不支持。如果需兼容 IE，得换思路：
- 用
margin-top: auto配合固定行高（仅适用于单行内容） - 把该项设为
display: flex+flex-direction: column，再用margin-top: 0和margin-bottom: auto - 放弃精确对齐，用
padding-top模拟（不推荐，语义和响应性差）
真正容易被忽略的一点：网格项是否设置了 height 或 min-height。如果没有，且内容很短，它可能本身就贴着顶部——这时加 align-self: start 看不出变化，不是失效，而是本来就在那儿。
