justify-items控制Grid容器内所有网格项在行轴（水平）的默认对齐，取值start/center/end/stretch（默认），仅Grid有效；align-items控制交叉轴（垂直）对齐，Flex和Grid均支持；place-items为二者简写，顺序为place-items:<align-items> <justify-items>；justify-self/align-self可覆盖单个子项对齐。
justify-items 控制水平对齐，只在 Grid 中生效
justify-items 作用于 Grid 容器，决定所有网格项在**行轴（inline axis）**上的默认对齐方式，也就是水平方向：左、中、右。它在 Flexbox 中完全无效，写了也没用。
常见值：start（左对齐）、center（水平居中）、end（右对齐）、stretch（拉伸填满列宽，默认值）。
注意：justify-items: stretch 只有在网格项没设 width 或 max-width 时才真正拉伸；如果子元素本身有固定宽度，它就卡在原宽不动。
align-items 控制垂直对齐，Flex 和 Grid 都支持
align-items 在两种布局中都起作用，但含义一致：控制所有子项在**交叉轴（cross axis）**上的对齐。Grid 中交叉轴是列方向（垂直），所以它管的是上下对齐；Flex 中则取决于 flex-direction —— 默认 row 时也是垂直对齐。
立即学习“前端免费学习笔记（深入）”；
常用值：start（顶部对齐）、center（垂直居中）、end（底部对齐）、stretch（拉伸填满行高，默认值）。
容易踩的坑：align-items: stretch 会被子元素的 height、min-height 或 max-height 阻断；哪怕只写了 height: auto，也可能让拉伸失效。
place-items 是两者的简写，但顺序容易记反
place-items 等价于同时设置 align-items 和 justify-items，但语法是 place-items: <align><justify></justify></align> —— 第一个值给 align-items（垂直），第二个给 justify-items（水平）。
例如：place-items: center start 相当于：align-items: center + justify-items: start（垂直居中、水平左对齐）。
别写成 place-items: start center 还以为是“左对齐+居中”，实际是“顶部对齐+水平居中”。这个顺序和 place-content 不同，也和 Flex 的 justify-content/align-items 习惯相反，得手动记牢。
单个网格项想破例？用 justify-self / align-self
容器级的 justify-items 和 align-items 可被单个网格项上的 justify-self 或 align-self 覆盖。
比如容器设了 justify-items: center，但某个按钮要靠右：.button-cta { justify-self: end; } 就够了。
这两个 self 属性也支持 self-start / self-end，但它们依赖书写模式（比如 RTL 布局下 self-start 可能是右边），日常开发用 start/end 更稳。
注意：align-self: baseline 对含文本的网格项对齐效果好，但前提是容器没设 align-items: stretch —— 后者会直接覆盖 baseline 行为。
stretch 的条件性：它不看父容器有多大，只看子元素有没有显式限制尺寸。一个 max-width: 100% 就足以让它失效，而这种限制往往来自重置样式或组件库默认规则。 
