两轴对齐：justify- 管行内轴、align- 管块轴
Grid 的对齐分两层、两轴。两轴:justify-* 管行内轴（水平书写下是横向）、align-* 管块轴（纵向）——注意这与 Flex 按「主轴 / 交叉轴」的记法不同,Grid 永远是行内轴 / 块轴绑定到 justify /
align，不随方向翻转。两层:*-items / *-self 把项在各自单元内对齐；*-content 在所有轨道之和小于容器时分配多出来的空间。一个关键差异：Grid 里 justify-self / justify-items
是生效的（Flex 里被忽略）。
记法对照（别和 Flex 混）： Flex——justify-content 管主轴、align-* 管交叉轴，随 flex-direction 翻转；Grid——justify-* 恒管行内轴、align-* 恒管块轴，与方向无关。
1 · 切换各对齐值，看项在单元内 / 轨道整体的位置
单元（虚线框）比项大，故 *-items 能把项推到单元的某角；轨道之和小于容器，故 *-content 能分配剩余空间。「焦点项 A」额外用 *-self 覆盖容器设置。
2 · 六个对齐属性的分工
| 属性 | 轴 | 层级 | 作用 |
|---|---|---|---|
justify-items |
行内 | 容器→所有项 | 每个项在自己单元内的横向对齐（默认 stretch）。 |
align-items |
块 | 容器→所有项 | 每个项在自己单元内的纵向对齐（默认 stretch）。 |
justify-self |
行内 | 单个项 | 覆盖 justify-items,在 Grid 生效（Flex 无效）。 |
align-self |
块 | 单个项 | 覆盖 align-items。 |
justify-content |
行内 | 容器→轨道组 | 列轨之和 < 容器时，分配横向剩余空间。 |
align-content |
块 | 容器→轨道组 | 行轨之和 < 容器时，分配纵向剩余空间。 |
place-items / place-content / place-self |
两轴 | — | 简写，place-items: center = align-items: center; justify-items: center。 |
居中一个元素的最短写法： display: grid; place-content: center——行内、块两轴同时居中，常用于把单个子元素钉在容器正中。