align-items: baseline 在 css grid 中无效，因规范不支持该值；grid 基于轨道布局，子项为块级盒且无天然基线，浏览器静默忽略并回退至 stretch。
align-items: baseline 在 CSS Grid 容器上无效，浏览器会静默忽略它。这不是你写错了 selector 或漏了单位，而是规范层面不支持——baseline 根本不是 align-items 在 Grid 中的合法取值。
为什么 align-items: baseline 在 grid 上不生效
CSS Grid 的对齐模型基于轨道（track），不是文本流。基线（baseline）是行内盒（inline box）的概念，而 grid 子项默认是块级盒（block-level box），没有天然基线。即使你给子项设 display: inline，grid 也会强制将其格式化为块级参与布局。
所有主流浏览器（Chrome、Firefox、Safari）都会把 align-items: baseline 当作无效声明，在 DevTools 中该属性带删除线，回退到默认的 stretch 行为。
- Grid 规范只接受
start、end、center、stretch、self-start等值 -
align-self: baseline却是合法的——它作用于单个网格项，且仅在该项是 flex 容器或含内联内容时才可能体现效果 - 别被 MDN 或某些过时教程误导：它们曾模糊表述“支持 baseline”，但实际指
align-self，而非align-items
align-self: baseline 能用，但有前提
align-self: baseline 是 Grid 中唯一能触发基线对齐的属性，但它不直接对齐文本，而是让该网格项**自身**按其内部第一个基线（first baseline）与同轨道其他项的基线对齐——前提是这些项都具备可计算的基线。
常见失效场景：
- 子项是纯
div且无文本、无inline内容 → 没有基线，退回到stretch - 子项含
img但未设vertical-align: baseline→ 图片默认按bottom对齐，基线位置偏移 - 字体不一致（如一个用系统默认，一个用自定义 font）→ 基线计算结果不同，视觉上仍不对齐
- 设置了
height或min-height→ 强制拉伸后覆盖基线逻辑
真正可控的做法是：确保子项内至少有一个内联级元素（如 span、img、input），并统一 font-family 和 line-height（推荐 line-height: normal 或具体数值如 1.2）。
想实现文字基线对齐？别硬刚 grid 的 align-items
最稳定、最易调试的方案是：把需要基线对齐的子内容封装进一个 display: flex 容器，再把这个容器作为 grid 的一个子项。
例如表单中标签 + 输入框 + 单位文字需基线对齐：
.grid-row {
display: grid;
grid-template-columns: max-content 1fr max-content;
}
.cell {
display: flex;
align-items: baseline; /* ✅ 这里生效 */
gap: 4px;
}
.cell input,
.cell span {
font: 1rem/1.2 system-ui, sans-serif; /* 统一字体和行高 */
}
.cell img {
align-self: baseline; /* 图标也参与基线对齐 */
}
这样做的好处：
- 基线逻辑由 flex 处理，完全符合预期
- grid 层只负责宏观布局（列宽、间距、响应式断点）
- 避免在 grid 子项上堆砌
vertical-align、line-height、font-size等补丁式样式
容易被忽略的关键点
基线对齐不是“开个开关就齐了”的功能。它高度依赖上下文：字体度量、行高计算、内联盒类型、甚至 UA 默认样式。如果你发现 align-self: baseline 看似生效但对不齐，优先检查 line-height 是否一致、img 是否加了 vertical-align、以及是否误用了 align-items 而非 align-self。真要追求像素级对齐，用 flex 嵌套比在 grid 上强行调参更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
