如何用CSS Grid解决多列文本在底部的基准线对齐-css教程-PHP中文网

grid 不支持 align-items: baseline，因其对齐模型基于轨道而非文本流，子项默认为块级盒无基线；规范仅接受 start、end、center 等值，baseline 无效。

如何用css grid解决多列文本在底部的基准线对齐

Grid 本身不支持 align-items: baseline 对多列文本做底部基准线对齐——这不是你写错了，是规范根本不认这个值。

为什么 `align-items: baseline` 在 Grid 中无效

CSS Grid 的对齐模型基于轨道（track），不是文本流。基线（baseline）是行内盒（inline box）的概念，而 Grid 子项默认是块级盒（block-level box），没有天然基线。所有主流浏览器（Chrome、Firefox、Safari）都会把 align-items: baseline 当作无效声明，在 DevTools 中该属性带删除线，自动回退到 stretch 行为。

规范只接受 start、end、center、stretch、self-start 等值；baseline 不在合法取值列表中。

别被 MDN 或旧教程误导：它们曾模糊说“支持 baseline”，实际指的只是 align-self: baseline（仅作用于单个子项，且有强前提）
align-self: baseline 能用，但前提是该子项内部存在可计算的基线（比如含 span、input、img 等内联内容），且未被 height、min-height 强制拉伸
纯 div + 纯文本？没基线 → 退回到 stretch

真正能落地的底部对齐方案：用 `display: flex` 封装文本内容

想让多列文本（比如表单标签、单位文字、按钮文字）视觉上“底部对齐”，最稳定、调试成本最低的做法，是把每列需要对齐的文字内容单独包一层 display: flex 容器，再把这个容器作为 Grid 的子项。

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

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

下载

Flex 容器天然支持 align-items: baseline（或更可控的 flex-end），且不会被 Grid 的块级格式化逻辑干扰。

确保各列内联内容统一 font-family 和 line-height（推荐 line-height: normal 或具体数值如 1.2）
避免给外层 Grid 子项设 height、min-height 或 vertical-align，否则会覆盖基线逻辑
图片需显式加 vertical-align: baseline，否则默认按 bottom 对齐，基线位置偏移

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.text-wrapper {
  display: flex;
  align-items: flex-end; /* 比 baseline 更直观、更可控 */
  min-height: 1.5em; /* 防止空内容塌陷，留出文字底部空间 */
}
.text-wrapper > * {
  margin: 0;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1.2;
}