align-items 和 justify-items 是 css grid 中控制所有网格项目对齐的容器级属性，分别作用于交叉轴（垂直）和内联轴（水平），但会被 align-self/justify-self 覆盖；仅对真正的网格项目生效。
align-items 和 justify-items 是控制 CSS Grid 容器内所有项目对齐方式的最简捷手段，但它们只作用于“未显式指定对齐属性”的项目 —— 一旦某个项目设置了 align-self 或 justify-self，对应容器级设置就会被跳过。
align-items 控制行内垂直对齐（即 cross-axis）
它决定所有网格项目在行方向（通常是垂直方向）上如何贴靠其所在轨道（track）的边缘或中心。常见取值有：start、end、center、stretch（默认）、baseline。
-
stretch是默认行为，会让项目拉伸填满整个行高 —— 但如果项目本身设置了height或min-height，且该值大于轨道高度，stretch就不会生效 - 使用
baseline时，需确保项目内有可参与基线对齐的内联内容（如文本），否则表现可能意外退回到start - 若网格容器设了
grid-auto-rows: minmax(100px, auto)，而某项目内容极少，align-items: center仍会将其垂直居中于这 100px 高度内，而非“视口”或“父容器”
justify-items 控制列内水平对齐（即 inline-axis）
它影响所有项目在其所在列轨道内的水平位置。取值与 align-items 基本一致：start、end、center、stretch（默认）。
-
stretch默认让项目撑满整列宽度 —— 但如果项目设置了width或max-width，且该值小于列宽，它就不会拉伸 - 当列宽由
fr单位定义（如grid-template-columns: 1fr 2fr），justify-items: center会让每个项目在各自分配到的列宽范围内水平居中，不是在整个容器宽度中居中 - 注意：IE 不支持
justify-items（包括旧版 Edge），如需兼容，得改用justify-self逐个设置，或回退到text-align+ 内联布局模拟
align-items/justify-items 与 align-self/justify-self 的优先级关系
容器级的 align-items 和 justify-items 是“兜底规则”，单个项目可通过 align-self 或 justify-self 覆盖它 —— 这是真正可控的粒度。
- 例如容器设了
align-items: start，但某个div加了align-self: end，那它就在自己那行的底部对齐，其余项目仍按start -
align-self: unset可显式取消继承，让它重新走浏览器默认（即stretch），而不是继承容器值 - 如果同时写了
align-self和margin: auto，后者在 Grid 中依然有效：margin: auto会覆盖align-self的垂直/水平行为，实现真正的居中（包括在非等高轨道中）
真正容易被忽略的是：这两个属性只对“网格项目”生效 —— 如果子元素被设了 display: contents，它就不再是网格项目，align-items 对它完全无效；同理，伪元素（如 ::before）默认也不是网格项目，除非显式设 grid-area 或通过 display: grid 触发生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
