align-items: baseline 在 grid 布局中根本不起作用
直接说结论：align-items: baseline 对 display: grid 容器**无效**。CSS Grid 规范明确不支持 baseline 作为 align-items 的合法值——浏览器会静默忽略它，回退到默认的 stretch 行为。
常见错误现象是：写了 align-items: baseline，但所有子项依然顶部对齐或拉伸填满行高，毫无“基线对齐”效果；开发者反复检查 HTML 结构、字体、line-height，其实问题出在 CSS 根本没执行。
-
align-items在 Grid 中只接受：start、end、center、stretch、flex-start（等价于start）等，baseline不在其中 - Flexbox 支持
align-items: baseline，但 Grid 不支持——这是二者关键差异，不能凭经验迁移 - Chrome/Firefox/Safari 都会把
baseline当作无效声明，DevTools 里该属性会带删除线
想让 grid 子项按基线对齐，得换思路
真正可行的做法是放弃 align-items，改用 justify-self + align-self 配合 display: inline-flex 或 display: inline-grid 等嵌套结构，但更常用、更可控的是：把需要基线对齐的元素统一包裹进一个 display: flex 容器里，再把这个 flex 容器放进 grid 项中。
使用场景典型如：网格中某一行要放图标 + 文字标签 + 数字，要求文字和数字的基线对齐，而图标居中——这时 grid 行本身不负责基线对齐，交由内部 flex 处理。
立即学习“前端免费学习笔记（深入）”；
- 给 grid 子项（比如
.cell）设display: flex和align-items: baseline - 确保子项内文本元素有明确字体（避免 UA 默认字体导致基线计算不一致）
- 若子项含
img，需设vertical-align: baseline或align-self: baseline（对 flex 子项有效） - 注意
line-height影响基线位置：不同line-height值会让基线偏移，建议统一设为normal或数值（如1.2）
/* 正确做法示例 */
.grid-row {
display: grid;
grid-template-columns: 1fr max-content;
}
.cell {
display: flex;
align-items: baseline; /* ✅ 这里生效，因为是 flex 容器 */
gap: 4px;
}
.cell img {
align-self: baseline; /* 图标也按基线对齐 */
}为什么 grid 不支持 baseline 对齐？
Grid 是二维布局系统，其对齐模型基于轨道（track）而非文本流。基线对齐本质依赖行内盒（inline box）的排版上下文，而 grid 子项默认是块级盒（block-level box），没有天然的“行内基线”。即便你给子项设 display: inline，grid 也会强制将其格式化为块级参与布局。
性能与兼容性影响不大——因为压根不解析，不存在渲染开销；但开发时容易浪费时间调试一个“语法正确但规范禁止”的写法。
- 规范依据：CSS Grid Level 1 §7.4
align-items取值列表不含baseline - 替代方案如
place-items: center或align-self: start都能正常工作，别被名字误导 - 如果真需要复杂基线控制（比如跨多行网格的基线对齐），说明设计已超出 grid 职责，应考虑 table 或重新组织 DOM 层级
容易被忽略的细节：font-family 和 font-size 会悄悄破坏基线对齐
即使你用对了 flex 嵌套，如果子项用了不同字体或字号，基线位置依然会错开——因为基线是相对于字体度量（font metrics）定义的，不是绝对像素位置。
- 同一行内，
font-family: "Helvetica"和font-family: "Georgia"的基线高度可能差 2–3px -
font-size: 14px和font-size: 16px的子项，即使都设align-items: baseline，视觉上也不齐 - 解决方案：强制统一
font-family、font-size、line-height；或用transform: translateY()微调（仅限已知偏差值的静态场景）
基线对齐从来不是“设个属性就完事”的事，它背后是字体排印的隐式约定。Grid 不支持它，其实是种诚实的设计选择。
