justify-items和align-items控制子项在单元格内的行内轴（水平）和块轴（垂直）对齐，默认stretch；justify-content和align-content对齐整个网格轨道，仅在轨道未填满容器时生效；justify-self和align-self可覆盖单个子项对齐。
justify-items 和 align-items 控制所有子项的默认对齐
这两个属性作用于 grid 容器，为所有 grid-item 设置统一的对齐基准。它们不改变网格线位置，只调整内容在单元格内的“摆放姿势”。
-
justify-items控制**行内轴（inline axis）** 对齐，即水平方向（LTR 下从左到右），取值如start、center、end、stretch -
align-items控制**块轴（block axis）** 对齐，即垂直方向，取值同上 - 默认值都是
stretch，所以子项常被拉满整个单元格——这容易误以为是“没生效”，其实是它太尽责了 - 若某子项自身设置了
justify-self或align-self，会覆盖容器级设置
justify-content 和 align-content 处理整个网格轨道的定位
当所有 grid 轨道加起来撑不满容器时，这两者才起作用。它们对齐的是**网格轨道整体**（即所有行/列组成的那个“大盒子”），不是单个子项。
-
justify-content沿**行内轴**分布轨道（比如多列窄了，左右留白怎么分） -
align-content沿**块轴**分布轨道（比如三行高度总和远小于容器高，行间距怎么分配） - 常见值：
start（贴边）、center（居中）、space-between（首尾贴边，中间等距）、space-around、space-evenly - 注意：
align-content在只有一行或一列时无效——没“内容可分布”
justify-self 和 align-self 覆盖单个子项对齐
这是最细粒度的控制，直接写在 grid 子项上，优先级高于容器上的 justify-items 和 align-items。
- 适用于需要某个按钮居右、某个头像垂直居中、某个卡片底部对齐等场景
- 支持
self-start/self-end，表示按该子项自身的书写模式对齐（比如 RTL 下self-start是右边） - 不能用于
display: contents的子项——它已脱离盒模型，没“自身”可对齐了 - 与
place-self简写等价：place-self: center end≡justify-self: end; align-self: center
别混淆 justify/align 的轴向和适用层级
最容易出错的是记混哪个属性管哪一层、哪根轴。记住一个口诀：「容器设项，内容设轨；inline 是行，block 是列」。
立即学习“前端免费学习笔记（深入）”；
-
justify-*一律作用于**行内轴**（默认水平），align-*一律作用于**块轴**（默认垂直） -
-items和-self都是对齐**子项内容**；-content是对齐**轨道集合** - Flexbox 里也有同名属性，但 Flexbox 没有
align-content对多行的有效控制（只有 wrap 后的行间分布），而 Grid 的align-content是真能精确调度每行间隙的 - 如果设置了
grid-auto-rows: minmax(100px, auto)却发现align-content: center不生效，大概率是因为所有行高度已由内容撑开，没留下可分配的剩余空间
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 100px;
justify-items: center;
align-items: start;
justify-content: space-evenly;
align-content: start;
}
<p>.item-a {
justify-self: end;
align-self: stretch;
}</p><p>.item-b {
place-self: center;
}实际布局中，justify-content 和 align-content 的生效条件比想象中苛刻，很多人调了半天没反应，其实只是网格轨道已经填满容器了。
