align-items控制网格项在交叉轴上的对齐，justify-items控制主轴对齐；二者均作用于容器，可被align-self/justify-self覆盖；place-items是其简写，IE不支持。
align-items 控制网格项在交叉轴上的对齐方式
align-items 作用于整个网格容器，影响所有直接子元素（即网格项）在**交叉轴**（column 方向的 Grid 中是水平轴，row 方向默认是垂直轴）上的对齐。它只对单行/列内未被 align-self 覆盖的项目生效。
常见取值与效果：
-
stretch（默认）：拉伸填满容器交叉轴剩余空间，注意会忽略元素自身的height或min-height -
start/end/center：按交叉轴起点、终点、中点对齐 -
baseline：按首行文本基线对齐，适合含文字的混合高度项，但需确保字体和行高一致，否则可能错位
⚠️ 容易踩的坑：align-items: center 在多行 Grid 中不会让所有行整体居中，而是每行内部各自居中；若想整个网格内容垂直居中容器，得配合 place-content: center 或给容器设 height + display: grid + justify-content/align-content。
justify-items 控制网格项在主轴上的对齐方式
justify-items 同样作用于容器，控制所有网格项在**主轴**（默认为 row 方向，即水平轴）上的对齐。它决定每个网格单元格内内容的水平对齐行为。
立即学习“前端免费学习笔记（深入）”；
典型使用场景：
- 所有网格项统一左对齐：
justify-items: start - 统一右对齐：
justify-items: end - 统一居中：
justify-items: center - 拉伸占满单元格宽度（常用于按钮、卡片）：
justify-items: stretch（默认值）
⚠️ 注意：justify-items 对 display: contents 子元素无效；如果某网格项设置了 justify-self，则该属性会覆盖 justify-items 的设置。
align-items 和 justify-items 配合失效的常见原因
这两个属性看似简单，但实际不生效往往不是写错了，而是被其他规则覆盖或前提条件不满足：
- 父容器没设
display: grid或display: inline-grid—— 属性完全无效 - 网格项本身设置了
align-self或justify-self，且值非auto，会优先采用自身设置 - 网格项是替换元素（如
<img alt="css Grid布局如何调整元素对齐_利用align-items、justify-items实现对齐" >）且未设vertical-align，可能受内联格式化上下文干扰 - 容器设置了
grid-template-rows或grid-template-columns为auto，导致交叉轴/主轴尺寸不可控，对齐无参照
调试建议：用浏览器开发者工具检查 computed 样式，确认 align-items 是否被继承或重置；临时加 border: 1px solid red 到网格项，看清单元格实际范围。
替代方案：place-items 更简洁地同时设置两者
place-items 是 align-items 和 justify-items 的简写，语法为 place-items: <align-items-value><justify-items-value></justify-items-value></align-items-value>，第二个值可省略，默认与第一个相同。
常用写法：
- 全居中：
place-items: center（等价于align-items: center; justify-items: center） - 左上角对齐：
place-items: start start - 拉伸+居中：
place-items: stretch center
兼容性注意：IE 完全不支持 place-items，如需兼容旧环境，必须拆成两个独立声明；另外，place-items 不能用于单独覆盖某一项，仍需依赖 place-self。
真正容易被忽略的是：当网格项内容本身有内在尺寸（比如图片原始宽高、文字行长），stretch 行为可能引发意外溢出或压缩，此时应显式设 max-width: 100% 或 object-fit 配合处理。
