align-items控制交叉轴（默认垂直）对齐，justify-items控制主轴（默认水平）对齐；图标文字不对齐主因是字体基线差异，需用vertical-align或嵌套flex解决；IE仅支持-ms-grid-row/column-align，现代项目可弃用前缀。
align-items和justify-items怎么选
文字和图标在Grid单元格里歪着、贴边、上下不居中，本质是没分清这两个属性的控制方向。align-items管垂直（行内）对齐，justify-items管水平（列内）对齐——不是“内容”方向，而是“网格轨道”方向。
-
align-items作用于所有grid item的**交叉轴**（默认是垂直方向），适合统一控制整行文字/图标的上下位置 -
justify-items作用于所有grid item的**主轴**（默认是水平方向），适合统一控制左右对齐 - 如果只改单个item，优先用
align-self或justify-self，避免影响其他格子 - 注意：设了
display: grid的容器才认这两个属性，flex容器里无效
图标+文字不同高度时为啥还是没对齐
常见现象：图标用，文字用保存，即使加了align-items: center，文字底部还是比图标低一截。根本原因是字体基线（baseline）参与对齐，而图标字体（如Font Awesome）通常没对齐文本基线。
- 最稳解法：给图标加
vertical-align: middle或vertical-align: -0.125em（微调经验值） - 更干净的做法：把图标和文字包进一个
display: flex的子容器，再用align-items: center——Grid负责布局，Flex负责内部对齐 - 别依赖
line-height硬拉，容易在不同字号/字体下失效 - 检查是否用了
font-size: 0清空间隙——这会让图标直接消失，因为图标字体依赖字号渲染
Grid align属性在IE里完全不生效
IE10/11虽然支持display: grid，但align-items和justify-items几乎全挂——它们只认老式-ms-grid-row-align和-ms-grid-column-align，且仅对直接子元素有效。
- 要兼容IE，必须写两套：
align-items: center+-ms-grid-row-align: center -
-ms-grid-row-align可取值只有start/end/center，没有stretch或baseline - 别指望
justify-items在IE里工作，老老实实用-ms-grid-column-align或改用text-align配合margin: auto - 如果项目已放弃IE，就直接删掉所有
-ms-前缀，现代浏览器对齐行为一致
文字图标在响应式Grid里突然错位
缩放屏幕或换设备后，原本居中的图标跑偏，大概率是Grid模板列宽用了fr单位，但内容撑开了单元格高度，导致align-items: center的参考基准变了。
- 检查
grid-template-rows是否用了auto或minmax()，换成固定高度（如48px）能立刻稳定对齐 - 避免在grid item里用
height: 100%，它会和align-items冲突，优先级难预测 - 移动端小屏下图标字体可能被压缩，建议用
font-size: clamp(1rem, 1.2vw, 1.5rem)保比例 - 真遇到复杂错位，加
overflow: hidden到grid item上，能快速判断是不是内容溢出干扰了对齐计算
事情说清了就结束。对齐看着简单，但字体、浏览器、响应式三者一碰，就容易漏掉基线、IE前缀或fr单位的影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
