align-self没生效的根本原因是父容器网格行轨道未定义尺寸；需设置明确高度、grid-template-rows（如1fr）或align-items: stretch来确保轨道尺寸确定，stretch才起作用。
子元素高度不一致时，align-self 为什么没生效？
常见现象是：父容器设了 display: grid，子项明明写了 align-self: stretch，但高度还是参差不齐。根本原因通常是父容器本身**没有明确高度约束**——align-self: stretch 在网格轨道（grid track）未定义尺寸时，无法拉伸到“不存在的边界”。Grid 的行高默认是 auto，即由内容撑开，此时拉伸无从谈起。
实操建议：
- 给父容器设置明确高度，如
height: 400px或min-height: 300px - 或显式定义行高：
grid-template-rows: 1fr（单行）或grid-template-rows: repeat(3, 1fr)（多行等分） - 检查是否误用了
align-items: flex-start等全局值，它会覆盖子项的align-self
stretch 是默认值，但为什么子项没填满整行？
align-self: stretch 确实是 Grid 子项的初始值，但它只在**该子项所在网格区域的行轨道有确定尺寸时才起作用**。如果行轨道是 auto 或 max-content，拉伸就退化为“按内容高度”，看起来和没设一样。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: auto→ 高度由最高子项决定，其余子项不会被拉伸 -
grid-template-rows: 1fr→ 所有子项在该行内按可用空间拉伸（前提是没设max-height等限制） -
grid-template-rows: minmax(100px, 1fr)→ 保证最小高度，同时允许弹性拉伸
用 align-self 单独控制某个子项高度是否可靠？
可以，但仅限于“在已有确定行高的前提下做微调”。比如某行高固定为 120px，你想让其中某个卡片顶部对齐、另一个居中、第三个拉伸到底——这时 align-self: start / center / stretch 就能精准生效。
注意陷阱：
-
align-self: stretch对设置了height或max-height的子项无效（会被截断） - 若子项内部有
display: flex且未设flex-direction: column，其子内容仍可能溢出 - 不要和
justify-self混淆——后者管水平对齐，对高度毫无影响
替代方案：不用 align-self，直接让所有子项等高
更稳定的做法是放弃逐个设置 align-self，转而用 Grid 自身的布局能力统一约束。例如：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr; /* 关键：强制所有行等高 */
gap: 16px;
}或者配合 align-items: stretch（作用于整个容器，等效于所有子项 align-self: stretch）：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: stretch; /* 比每个子项写 align-self 更简洁 */
}真正容易被忽略的是：Grid 的“等高”本质依赖于**轨道尺寸的确定性**，而不是子项自身的样式声明。哪怕写一百遍 align-self: stretch，只要 grid-template-rows 还是 auto，它就只是个摆设。
