align-self: end 不够用，因它仅控制网格项在单元格内的位置，不作用于项内文字排版；文字仍从顶部开始渲染，导致“盒子到底、字还在顶上”。
不能只靠 align-self: end，文本本身必须脱离默认块级流或主动参与垂直定位。
为什么 align-self: end 不够用
设置 align-self: end 确实会让整个网格项（比如一个 div）贴着单元格底部对齐，但项内部的文字仍按默认规则渲染：从顶部开始排布，行高撑开后底部留白。也就是说，“盒子到底了”，但“字还在顶上”。这在卡片底部按钮、指标说明文字等场景中特别明显。
-
align-self控制的是网格项在轨道内的位置，不是项内内容的排版 - 若子元素是普通块级元素（如
p或未设display的div），text-align对垂直方向无效 - 若子元素用了
display: flex，text-align直接失效，必须用align-items
让文字真正“坐到底部”的三种可靠方式
核心思路：把文字所在容器变成一个能主动控制内部垂直定位的上下文。
- 给文字容器设
display: flex; align-items: flex-end; justify-content: flex-start;，再配height或min-height提供基准高度 - 用
line-height匹配容器高度（仅限单行）：height: 2rem; line-height: 2rem;，但字体缩放或换行时会崩 - 用
position: absolute; bottom: 0;定位文字，前提是父容器position: relative;且高度可控
align-content 和 align-items 别混用
align-content 只作用于多行轨道整体，和单个文字对齐无关；align-items 是网格容器属性，影响所有子项在单元格内的垂直对齐——但它只对子项生效，不穿透到子项内部的文字。
立即学习“前端免费学习笔记（深入）”；
- 想让所有卡片底部文字对齐？得统一每张卡片内部的布局方式，而不是在外层 grid 上调
align-items - 如果卡片高度不固定，
align-items: end+ 内部flex是目前最稳的组合 - Subgrid 能解决跨卡片底部对齐问题，但需要卡片内部用
display: subgrid并复用外层行轨道——实际中需权衡浏览器支持与结构复杂度
最常被忽略的一点：文字是否换行决定了方案选择。单行可压 line-height，多行必须用 flex 或 absolute，而任何方案都依赖父容器有明确的高度上下文——Grid 本身不提供这个，得你手动给。
