align-items 控制网格项在单元格内垂直对齐，justify-items 控制水平对齐；二者生效需列/行有明确尺寸；align-content/justify-content 仅在轨道总和小于容器时分配多余空间；align-self/justify-self 可覆盖容器设置但有兼容性限制。
align-items 和 justify-items 怎么选？
二者控制的是网格容器内所有 grid-item 的对齐方式，但方向不同：align-items 管垂直（行内交叉轴），justify-items 管水平（行内主轴）。别记反——主轴默认是水平的，所以 justify- 就是左右；交叉轴就是上下，对应 align-。
常见错误：在单列网格里狂调 justify-items 却发现没反应。原因往往是列宽设成了 fit-content 或 auto，导致项没“可对齐的空间”。要让它生效，列必须有明确宽度（比如 1fr 或固定值）。
-
align-items: center让所有子项在各自网格单元内垂直居中 -
justify-items: stretch（默认）会拉伸子项填满单元格；设为start则左对齐且不拉伸 - 若子项本身设置了
align-self或justify-self，会覆盖容器级的items设置
align-content 和 justify-content 什么时候才起作用？
这两个属性只在网格容器存在**多行/多列剩余空间**时才有效——也就是 grid-template-rows 或 grid-template-columns 定义的轨道总和，小于容器自身尺寸时，才会有多余空间供它们分配。
典型误用：给只有 1 行的网格设 align-content: center，结果毫无变化。因为没“多出来的行间隙”可分配。它不是让内容在容器里居中，而是让“行组”在容器里分布。
立即学习“前端免费学习笔记（深入）”；
-
align-content: space-between把行与行之间均匀拉开，首尾贴容器边缘 -
justify-content: end把整组列右对齐（注意：不是列内内容右对齐） - 若使用
grid-auto-rows: 100px+ 多个自动行，align-content才可能有表现空间
align-self / justify-self 覆盖规则和兼容性坑
这是单个网格项的“特权设置”，优先级高于容器的 align-items 和 justify-items。但要注意：它只对**直接子元素**生效，嵌套的子元素不受影响。
容易被忽略的点是 Firefox 对 justify-self 在某些隐式网格（由 grid-auto-flow 生成的项）中的支持曾长期滞后，虽已修复，但在旧版本或企业内网环境仍可能失效。稳妥做法是：显式定义 grid-column / grid-row 后再设 justify-self。
-
align-self: flex-end不合法——CSS Grid 中只能用self-start、self-end、center等，不能混用 Flex 关键字 -
justify-self: stretch在项有明确宽度（如width: 200px）时会失效，它只在无固有宽/高时拉伸 - IE 完全不支持
justify-self，需用margin: auto替代（仅限块级项）
content 对齐和 items 对齐混用时的冲突逻辑
真正让人困惑的不是“怎么写”，而是“谁管哪一段距离”。简单说：items 类控制项在**单个网格单元内**的位置；content 类控制**所有轨道组成的整体**在容器内的位置；而 self 类只管那个具体项。
举个实际场景：一个 3×3 网格容器宽高都是 600px，每格 200px，总占满。此时 align-content 无效；但若改成 grid-template-rows: repeat(3, 150px)，总高只剩 450px，剩下 150px 空间就归 align-content 分配。
- 不要指望
justify-content把某个按钮“水平居中到整个页面”，它只负责网格轨道块的定位 - 想让某一项真正居中到容器中心？得组合用：
align-self: center+justify-self: center+ 确保其所在单元格本身有足够空间 - 如果用了
grid-template-areas，justify-content依然只作用于生成的轨道块，跟命名区域无关
