align-self: end 和 align-items: end 只控制网格项在单元格内的位置，不作用于项内文字；单行文本底部对齐用 line-height 匹配固定高度，多行则用 flex 容器加 align-items: flex-end。

align-self: end 只能让网格项贴底，不能让项内文字坐到底部——这是最常被卡住的地方。真正起作用的是容器内部的布局上下文，不是 Grid 容器本身。

为什么 align-items: end 在 Grid 容器上无效？

它只控制子项（比如一个

或

）在单元格内的垂直位置，不穿透到子项内部的文字流。即使整个

贴到了单元格底部，它的第一行文字仍从顶部开始渲染，行高撑开后底部留白明显。

• 常见错误现象：grid-template-rows: 1fr; + align-items: end;，文字看起来“悬在半空”
• 适用场景：卡片底部说明文字、指标标签、按钮组下方提示语
• 关键限制：align-items 和 align-content 都不作用于文本内容本身，只管网格项盒子

单行文本底部对齐：用 line-height 匹配高度

前提是容器高度固定、文字不会换行。这是最轻量的方案，但容错性差。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须设置明确的 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;）
• 文字容器（如
  ）保持默认块级行为，无需额外样式
• 比 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 层就区分语义： vs
  ，再分别应用不同对齐逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！