在 Grid 中的两层对齐
Grid 是 Box Alignment 落得最完整的模式，也最贴合统一模型：justify-* 恒管行内轴、align-* 恒管块轴，不随任何方向翻转，与 Flex 形成对照。它有两层对齐，*-items 与 *-self 把项在各自 grid area 内定位（默认 stretch 撑满单元），*-content
在所有轨道之和小于容器时分配多出来的空间。与 Flex 最关键的区别是 justify-self 与 justify-items 在 Grid 中生效。
1 · 两层对齐与六个属性
单元（虚线）比项大时 *-items 把项推到单元某角；轨道之和小于容器时 *-content 分配剩余空间。
*-self 覆盖容器设置，这一层是 Flex 做不到的。| 属性 | 轴 | 层级 | 说明 |
|---|---|---|---|
justify-items / align-items |
行内 / 块 | 容器到每项 | 每项在自己的 grid area 内对齐，默认 stretch 撑满。 |
justify-self / align-self |
行内 / 块 | 单项 | 覆盖容器设置。justify-self 在 Grid 生效，Flex 不具备。 |
justify-content / align-content |
行内 / 块 | 容器到轨道组 | 轨道之和小于容器时分配剩余空间。 |
与 Flex 对照即可记住分野：Flex 的 justify-content 管主轴、随方向翻、无 justify-self；Grid 的 justify-* 恒管行内轴、不翻、justify-self 照常生效。根子在于 Grid 有真正的二维单元格，「单项在自己格子里的行内对齐」这件事才成立。
建议 · Grid 对齐的深入内容另有专题，本页只负责把统一模型映射到 Grid：两轴对齐（六个属性的分工）与列内对齐。