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 的设置。
