align-self: end 能使网格项底部对齐，但前提是父容器为 display: grid/inline-grid、有明确行高（如 1fr）、且未被 grid-area 或 place-self 覆盖。
用 align-self: end 确实能对齐底部，但得先确认容器是 Grid 布局
很多人直接写 align-self: end 没效果，根本原因是父容器没设 display: grid 或 display: inline-grid。Grid 的对齐属性（包括 align-self）只在 Grid 容器内生效，flex 容器里它完全被忽略。
另外注意：即使父容器是 Grid，如果该网格项所在的行没有明确高度（比如全靠内容撑开），align-self: end 也可能“看起来没动”——因为行高 = 内容高，没剩余空间可对齐。
- 确保父元素有
display: grid - 给网格容器设置
grid-template-rows（如1fr、200px或minmax(100px, auto)），让行有可分配的垂直空间 -
align-self: end作用于单个网格项，不是整个容器；想整体对齐用align-items: end
align-self: end 在不同浏览器里的兼容性没问题，但别和 Flex 混用
chrome、firefox、safari（≥10.1）、edge（≥16）都支持 align-self: end。问题常出在开发时误把 Grid 和 Flex 搞混：比如父容器同时写了 display: grid 和 display: flex（后者覆盖前者），或用 js 动态改了 display 值但没清理旧样式。
- 检查 computed styles，确认最终生效的是
display: grid - 避免在同一个元素上反复切换
display类型，容易触发渲染异常 - 不用
align-self: flex-end—— 这是 Flex 语法，在 Grid 里无效，也不被标准支持
替代方案：如果 align-self: end 不生效，优先查这三处
比改代码更高效的是定位原因。90% 的“对齐失败”来自以下三个硬性前提缺失：
立即学习“前端免费学习笔记（深入）”；
- 父容器缺少
height或min-height，导致网格行无法计算可用空间 - 网格项本身设置了
align-self: stretch（默认值）或其他冲突值，覆盖了你写的end - 用了
grid-area或place-self，它们会覆盖align-self
快速验证方法：临时加一句 outline: 1px solid red 到父容器和网格项，看实际布局范围是否符合预期。
.grid-container { display: grid; height: 300px; /* 关键：必须有明确高度 */ grid-template-rows: 1fr; /* 让行可伸缩 */ } .grid-item { align-self: end; /* 对齐到底部 */ }真正容易被忽略的是：Grid 行的高度必须“可测量”。光写 grid-template-rows: auto 或不写，等于把对齐空间交给了内容本身——这时候 align-self 就失去了参照系。