align-items: baseline 在 CSS Grid 中完全无效，因规范不支持且子项为块级盒无天然基线；应改用 Flex 嵌套实现基线对齐。
align-items: baseline 在 CSS Grid 容器上完全无效 —— 浏览器会静默忽略它，回退到 stretch 行为。这不是你写错了，是规范本身就不支持。
为什么 align-items: baseline 在 Grid 中不生效
CSS Grid 的对齐模型基于轨道（track），而非文本流；基线（baseline）是行内盒（inline box）排版上下文的概念，而 Grid 子项默认是块级盒（block-level box），没有天然基线。W3C 规范明确将 baseline 排除在 align-items 合法值之外。Chrome、Firefox、Safari 均会把该声明标为无效（DevTools 里带删除线）。
常见错误现象：
- 写了
align-items: baseline，子项却仍顶部对齐或拉伸填满 - 反复调
font-family、line-height、vertical-align，毫无效果 - 误以为是字体问题，其实 CSS 根本没执行这条规则
真正可控的做法：用 Flex 嵌套替代 Grid 直接对齐
Grid 负责二维结构划分，基线对齐交给内部 Flex 容器处理——这是目前最稳定、调试最直观的方案。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 给每个需要基线对齐的 Grid 子项（如
.cell）设display: flex和align-items: baseline - 确保子项内至少有一个内联级内容（如文字、
<img alt="如何在CSS Grid中精准控制文字基线对齐Baseline？" >、<input>），空<div> 没有基线，会 fallback 到 <code>flex-start - 若含
<img alt="如何在CSS Grid中精准控制文字基线对齐Baseline？" >，加align-self: baseline或vertical-align: baseline（后者仅对 inline/inline-block 有效） - 统一
font-family和line-height（推荐line-height: normal或具体数值如1.2），避免 UA 默认字体导致基线计算不一致
示例：
.grid-row {
display: grid;
grid-template-columns: 1fr max-content;
}
.cell {
display: flex;
align-items: baseline;
gap: 4px;
}
.cell img {
align-self: baseline;
}
别踩坑：justify-items: baseline 也不行
有人尝试用 justify-items: baseline（水平方向），但同样无效。Grid 规范中 justify-items 也不接受 baseline 值。部分旧资料提到它“可能生效”，实测是误读或浏览器非标行为，不可依赖。
容易混淆的点：
-
align-self: baseline对 Grid 子项也无效（同理，align-items不支持，align-self自然也不支持） -
vertical-align: baseline只对 inline/inline-block 元素有效，对 Grid 子项（默认 block）不起作用 - 设
height或min-height会强制拉伸，覆盖任何基线逻辑
复杂点在于“基线”本身不是固定像素线
它由字体度量（font metrics）决定，受 font-size、font-family、line-height 共同影响。同一行里，一个 14px sans-serif 和一个 20px serif 的基线位置不同，但浏览器能对齐它们的“第一行文本基线”——前提是上下文正确（即 Flex 容器）。想靠 Grid 一层搞定，等于绕开排版本质去硬解几何题。
