最常见原因是父容器不是grid布局；其次因网格容器无明确高度、行高未定义、place-self等属性覆盖，或元素脱离网格流。
align-self: end 为什么没效果
最常见原因是父容器根本不是 Grid 布局——align-self 在 display: flex 或 display: block 容器里完全无效。检查 computed styles，确认父元素最终生效的是 display: grid 或 display: inline-grid。
即使父容器是 Grid，以下三点也会让 align-self: end “看起来没动”：
- 网格容器缺少
height或min-height，导致行高由内容撑开，没有剩余空间可对齐 - 目标项所在行未定义高度（比如只写
grid-template-rows: auto），end无处可落 - 该元素同时设置了
place-self、grid-area或align-self: stretch（默认值），后声明的会覆盖end
必须设置的父容器基础样式
仅加 align-self: end 不够，父容器要提供“可对齐的空间”：
- 给网格容器加
min-height: 100vh（全屏场景）或固定高度如height: 400px - 用
grid-template-rows: 1fr auto明确划分行高，其中auto行放目标项，1fr吸收剩余空间 - 避免只写
grid-template-rows: auto或留空——它不会创建垂直分配空间
示例：
.grid { display: grid; min-height: 300px; grid-template-rows: 1fr auto; } .bottom-item { align-self: end; }
align-self: end 和 align-items: end 的区别
两者都控制块轴（垂直方向）对齐，但作用范围不同：
-
align-items: end作用于所有直接子项，适合整个容器底部对齐（如卡片 footer 沉底） -
align-self: end只作用于单个子项，其他项仍按align-items或各自align-self值渲染 - 如果容器里有标题需顶部对齐、按钮需底部对齐，必须用
align-self: end单独设置按钮，而非改align-items
注意：align-self: flex-end 是 Flex 语法，在 Grid 中不被标准支持，应始终用 end。
容易被忽略的冲突点
即使代码写对了，这几个细节常导致失效：
-
margin: auto在块轴方向（如margin: auto 0）会直接接管对齐逻辑，align-self被忽略 - 目标元素若设了
position: absolute或position: fixed，已脱离 Grid 流，align-self失效 - 浏览器兼容性没问题（Chrome/Firefox/Safari≥10.1/Edge≥16），但若父容器同时写了
display: grid和display: flex，后者会覆盖前者
快速验证：临时加 outline: 1px solid red 到父容器和目标项，看网格轨道是否真有高度、目标项是否在预期单元格内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
