Grid 不支持 align-items: baseline，因其对齐模型基于轨道而非文本流，子项默认为块级盒无基线；规范仅接受 start、end、center 等值，baseline 无效。
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 的子项。
立即学习“前端免费学习笔记（深入）”；
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;
}如果坚持用 Grid 原生能力，只能退到 align-items: end
当“底部对齐”实际要的是视觉底部（即内容盒底边）对齐，而非严格字体基线对齐时，align-items: end 是唯一可靠选择。它让每个 Grid 子项按自身内容盒的底边对齐，不受字体、行高差异影响。
- 适用于标题+副标题、图标+文字、数字+单位等组合，只要求“底边平齐”，不要求字母 x 底部对齐
- 比
baseline更兼容、更可预测，尤其在混合字体或动态字号场景下 - 注意：若子项设置了
padding-bottom或margin-bottom，会影响底边位置，需统一归零或重置
真正难的不是写对代码，而是分清你要对齐的是“字体基线”还是“内容盒底部”——前者在 Grid 里基本无解，后者用 align-items: end 一行搞定。
