Grid基线对齐不一致主因是文本高度、行高、字体或内边距差异，应优先用align-self/justify-self配合微调；空元素无基线，需确保有文本内容；Flex在基线对齐上更稳定，必要时替代Grid。
Grid 子元素基线对齐不一致，通常是因为文本内容高度、行高、字体差异或内边距影响了基线位置。单纯依赖 align-items: baseline 或 justify-items: baseline 容易失效，此时应优先用 align-self 和 justify-self 配合基线对齐策略，再辅以微调。
确认父容器启用基线对齐
Grid 容器需明确设置对齐方式，否则子项默认按 stretch 拉伸，基线无意义：
-
align-items: baseline控制行内（交叉轴）基线对齐，适用于多行 Grid； -
justify-items: baseline在部分浏览器中支持有限（尤其 Flex/Grid 混用时），实际更推荐用justify-self单独控制； - 确保子元素是**行内级或有文本内容**——空 div、纯图标、
display: block且无文字的元素没有自然基线，会退化为底边对齐。
用 align-self: baseline 精确控制单个子项
当某几个子项基线偏高/偏低，可单独设置其 align-self：
-
align-self: baseline：让该子项以其第一行文本基线参与对齐； -
align-self: end或align-self: center可作为备选方案，避开基线计算不可控问题； - 若子项含图标+文字（如按钮），建议统一包裹一层
span并设display: inline-flex，再用align-items: baseline对齐内部元素，比依赖外层 Grid 基线更可靠。
微调：用 margin 或 transform 补偿像素级偏差
即使启用了 baseline，不同字体（如系统默认 sans-serif vs. 字重较粗的 Inter）仍会导致视觉错位。这时用 align-self + 微调更稳妥：
立即学习“前端免费学习笔记（深入）”；
- 对轻微偏移的子项加
margin-top: -2px或transform: translateY(-1px)； - 避免直接改
line-height或font-size，以免破坏设计一致性； - 配合
box-sizing: border-box和清除默认vertical-align（如设vertical-align: top）减少干扰。
替代方案：用 flex 替代 grid 处理基线敏感布局
如果整行都是文本+图标组合（如表单项、工具栏），Grid 的基线行为不如 Flex 稳定：
- 将该行设为
display: flex，子项设align-items: baseline； - Flex 对基线定义更统一，且
align-self在 Flex 中同样生效，调试更直观； - Grid 适合二维布局，Flex 更擅长一维内联对齐——别硬套 Grid 解决它不擅长的问题。
不复杂但容易忽略：基线对齐本质依赖“第一行文本”，没文字就等于没基线。先保证内容结构合理，再用 align-self 和微量位移收尾，比反复调 line-height 更可持续。
