align-items: baseline 在 CSS Grid 容器上无效，因规范不支持该值，浏览器静默忽略并回退至 stretch；Grid 基于轨道布局，子项为块级盒且无天然基线，仅 align-self: baseline 在满足内容前提时可能生效。
align-items: baseline 在 Grid 容器上根本不起作用
直接写 align-items: baseline 到 Grid 容器上，浏览器会静默忽略它——不是你漏写了单位或 selector 错了，而是 CSS Grid 规范压根不支持这个值。DevTools 里你会看到该声明带删除线，实际行为回退到默认的 stretch。Grid 的对齐模型基于轨道（track），子项默认是块级盒，没有天然基线；baseline 是行内盒的概念，两者底层逻辑不兼容。
想让段落和注脚“看起来”基线对齐，得靠 align-self: baseline + 内容支撑
align-self: baseline 是 Grid 中唯一合法且可能生效的基线相关属性，但它只在满足以下条件时才真正起效：
- 该网格项内部必须存在可计算基线的内容：比如含文本的
<span>、设置了vertical-align: baseline的<img>、或<input>等表单控件 - 所有参与对齐的项应使用一致的
font-family和line-height（推荐line-height: normal或具体数值如1.2） - 避免给这些项设
height、min-height或align-items: stretch，否则会覆盖基线逻辑 - 纯空
<div>或仅含 SVG 图标的项，没有基线，align-self: baseline会退回到stretch
更稳定的做法：用 Flex 封装需要对齐的文本内容
把段落文字和右侧注脚各自包裹进一个 display: flex 容器，再把这个容器作为 Grid 子项，是最易控、调试成本最低的方案。例如：
.grid-item {
display: flex;
align-items: baseline; /* 这里 baseline 是 Flex 合法值 */
}
.text-wrapper { order: 1; }
.footnote-wrapper { order: 2; }
这样既绕开了 Grid 对 baseline 的限制，又保留了 Grid 的二维布局能力——外层负责区域划分，内层 Flex 负责精确对齐。
立即学习“前端免费学习笔记（深入）”；
图标类注脚常被忽略的关键点
如果注脚是 Font Awesome 或 inline SVG，它们本身没有基线。常见补救方式有：
- 加隐藏文本：
<span class="icon"><i class="fa fa-info"></i><span aria-hidden="true"> </span></span>，用空格撑出基线位置 - 伪元素辅助：
.icon::after { content: "x"; visibility: hidden; font-size: 0.8em; } - 统一用
vertical-align: baseline修饰图标，但需注意父容器不能是 Grid 子项（否则无效），必须在 Flex 或 inline 上下文中使用
真正麻烦的从来不是写哪行 CSS，而是判断哪个元素在哪个上下文里有没有基线——这得看 DOM 结构、display 类型、字体渲染细节，甚至浏览器版本。别硬套 baseline，先检查 DevTools 里每个子项是否真有可计算的基线位置。
