align-self: end 和 align-items: end 只控制网格项在单元格内的位置，不作用于项内文字；单行文本底部对齐用 line-height 匹配固定高度，多行则用 flex 容器加 align-items: flex-end。
align-self: end 只能让网格项贴底，不能让项内文字坐到底部——这是最常被卡住的地方。真正起作用的是容器内部的布局上下文，不是 Grid 容器本身。
为什么 align-items: end 在 Grid 容器上无效？
它只控制子项（比如一个 <p></p> 或 <div>）在单元格内的垂直位置，不穿透到子项内部的文字流。即使整个 <code><p></p> 贴到了单元格底部，它的第一行文字仍从顶部开始渲染，行高撑开后底部留白明显。
- 常见错误现象：
grid-template-rows: 1fr;+align-items: end;，文字看起来“悬在半空” - 适用场景：卡片底部说明文字、指标标签、按钮组下方提示语
- 关键限制：
align-items和align-content都不作用于文本内容本身，只管网格项盒子
单行文本底部对齐：用 line-height 匹配高度
前提是容器高度固定、文字不会换行。这是最轻量的方案，但容错性差。
- 必须设置明确的
height（如height: 2.5rem;），且line-height与之严格相等 - 加
white-space: nowrap;防止意外换行导致文字截断或错位 - 字体缩放（如用户启用系统大字体）或
em/rem动态单位可能使line-height失效 - 示例：
.single-bottom { height: 2.5rem; line-height: 2.5rem; white-space: nowrap; }
多行文本底部对齐：用 display: flex + align-items: flex-end
这是目前兼容性好、可控性强的通用解法。Grid 项本身设为 flex 容器，再由它来定位内部文字。
立即学习“前端免费学习笔记（深入）”；
- 父容器（即 Grid 子项）需设
display: flex;、flex-direction: column;、align-items: flex-end; - 必须提供高度基准：用
min-height或height（哪怕只是min-height: 3rem;） - 文字容器（如
<p></p>）保持默认块级行为，无需额外样式 - 比
position: absolute更健壮——不依赖position: relative父级，也不怕内容溢出遮挡 - 示例：
.grid-item { display: flex; flex-direction: column; align-items: flex-end; min-height: 4rem; }
换行判断不可靠，别试图用 JS 或 CSS 检测“是否单行”
所谓“单行自动居中、多行自动居左/居底”的需求，没有稳定可靠的纯 CSS 实现方式。浏览器无法通过 CSS 原生判断内容是否溢出换行，text-overflow: ellipsis 和 line-clamp 也只控制截断，不提供状态反馈。
- 响应式断点变化、字体加载延迟、zoom 缩放都会让“单行”逻辑失效
- 所有号称“智能判断”的方案，最终都退化为固定策略：要么统一按多行处理（推荐），要么接受单行专用场景的局限
- 真正要兼顾灵活性，得在 HTML 层就区分语义：
<span class="caption-single"></span>vs<p class="caption-multi"></p>，再分别应用不同对齐逻辑
