HTML5 Grid对齐需分三层：容器级（justify-items/align-items）、网格块级（justify-content/align-content）、项目级（justify-self/align-self），配合gap控制间距。
在 HTML5 中使用 Grid 布局对齐容器内所有项目，核心是分清三层作用域：容器整体位置、项目在各自单元格内的默认对齐、以及单个项目的覆盖调整。对齐不是靠一个属性搞定，而是按需组合。
统一控制所有项目的单元格内对齐
这是最常用也最直接的方式，适用于让每个项目在其分配的网格区域中居中或靠边：
-
水平居中：在容器上设置
justify-items: center（默认值是stretch，即拉满宽度） -
垂直居中：设置
align-items: center（默认也是stretch，拉满高度） - 两者同时写，就能让所有项目在各自格子中完全居中
- 其他对齐值包括
start（左/顶）、end（右/底），注意direction: rtl会影响start/end的物理方向
调整整个网格块在父容器中的位置
当网格内容总尺寸小于其父容器时，可用这两个属性把整块网格“挪”到指定位置：
-
水平挪动：
justify-content: center（居中）、start（靠左）、end（靠右）、space-between（两端对齐） -
垂直挪动：
align-content: center（仅多行/多列且有剩余空间时生效；单行网格用它无效） - 简写形式：
place-content: center等价于同时设justify-content: center和align-content: center
单独微调某个项目的位置
如果大部分项目按统一规则对齐，但个别需要例外处理，就在对应项目上加：
-
justify-self: end—— 水平右对齐（覆盖容器的justify-items） -
align-self: flex-end—— 垂直底部对齐（覆盖容器的align-items） - 这些属性优先级高于容器级设置，只影响当前元素
别忘了间距管理：用 gap，不用 margin
对齐效果常被不合理的留白破坏，推荐统一用 gap 控制项目间空隙：
-
gap: 12px—— 行距列距都是 12px -
gap: 8px 16px—— 先写垂直间距（row-gap），再写水平间距（column-gap） - 或分开写：
row-gap: 8px; column-gap: 16px;，更清晰可控 - 避免混用
margin，否则可能造成间距翻倍或折叠
