Grid图文混排错位主因是行内元素基线对齐与line-height干扰，非Grid本身问题；应让图文分属独立grid item，或通过vertical-align、line-height、font-size:0等精细调控行内布局。
文字和图片在 Grid 布局中混排错位，核心问题往往不是 Grid 本身没对齐，而是行内元素的基线（baseline）默认对齐方式和line-height 导致的行高撑开干扰了 align-items 的预期效果。align-items 控制的是整个网格项（grid item）在交叉轴上的对齐，但如果内部是 img + span 这类行内混合内容，实际渲染高度受 line-height、vertical-align、字体度量等影响，容易“看着没对齐”。
明确 grid item 是对齐容器，不是内容容器
Grid 的 align-items 作用于每个直接子元素（即 grid item），它不会深入到 item 内部去调整文字和图片的位置。如果把 img 和文字放在同一个 grid item 里（比如一个 div 里同时有 和 ），那 align-items 对这个 div 生效，但 div 内部的图文仍按行内规则排布——这就容易错位。
- ✅ 推荐做法：让图片和文字各自成为独立的 grid item，例如用两个 div 分别放 img 和文字，再用 grid-template-columns 控制并排
- ❌ 避免做法：把 img 和文字塞进同一个 div 当作一个 item，再指望 align-items 居中它内部的图文
统一 vertical-align 并重置 line-height
当必须将图文放在同一 grid item 内（如标题+图标组合），需手动干预行内对齐：
- 给 img 设置 vertical-align: middle（或 top/baseline/match-parent），避免默认 baseline 对齐导致底部留白
- 给包含文字的行内元素（如 span）设置 line-height: 1 或与容器 height 一致的值，防止字体上下留白撑高容器
- 可加 font-size: 0 在父容器上临时消除行内间隙，再单独给文字设 font-size（适合图标+文字紧凑场景）
用 place-self 或 align-self 精确控制单个 item
如果某张图片需要垂直居中，而同行的文字不需要，不要只依赖容器级的 align-items，改用 item 级控制更灵活：
- align-self: center 写在图片所在的 grid item 上，让它独立居中
- place-self: center 是 align-self + justify-self 的简写，适用于单 item 快速定位
- 注意：align-self 只对 display: grid 的直接子元素有效，且会覆盖父容器的 align-items
检查 box-sizing 和边距干扰
错位有时并非对齐逻辑问题，而是视觉误差：
- 图片默认有 display: inline，会产生 4px 左右的底部空白（来自行高），用 display: block 或 vertical-align: top 可消除
- 确认是否意外设置了 margin、padding 或 border，尤其图片常被 reset 不彻底
- 用浏览器开发者工具选中元素，看 computed 样式里的 “height”、“line-height”、“vertical-align” 是否符合预期
基本上就这些。Grid 本身很稳，错位多出在行内渲染细节上。抓住 vertical-align、line-height、item 独立性这三个关键点，图文混排就能对得干净利落。
