align-items和justify-items用于控制网格容器内所有子项在各自单元格中的默认对齐：前者管垂直（块轴）对齐，后者管水平（行轴）对齐，均默认stretch；可被align-self/justify-self单独覆盖。
align-items 和 justify-items 控制所有单元格内默认对齐
这两个属性写在 grid 容器上，决定所有子项在各自单元格内的摆放位置。默认值是 stretch，所以子项常被拉满整个单元格——这不是 bug，而是它太“尽责”了。
常见误操作是以为没生效，其实只是内容被撑开了。若想让所有子项顶部对齐且不拉伸，直接设：align-items: start；水平居中则加 justify-items: center。
-
align-items管垂直（块轴），取值有start、end、center、stretch -
justify-items管水平（行内轴），取值同上 - 它们只影响“单元格内部”，不改变网格线位置或轨道尺寸
- 若某子项设置了
align-self或justify-self，会覆盖这两个全局设置
align-self 和 justify-self 覆盖单个网格项对齐
这是最细粒度的控制方式，直接写在某个 .grid-item 上，优先级高于容器级的 align-items。
比如表单里，大部分输入框顶部对齐，但一个提交按钮需要底部对齐，就给它加 align-self: end。
-
align-self: start让该项在单元格内顶部对齐（即使容器设了stretch） -
justify-self: end让该项右对齐，常用于操作按钮 - 不支持
display: contents的元素——它已脱离盒模型，没有“自身”可对齐 - 可简写为
place-self: center end，等价于justify-self: end; align-self: center
align-content 和 justify-content 对齐的是整个网格轨道组
这两个属性不作用于子项，而是对齐“所有行轨道组成的整体”或“所有列轨道组成的整体”。它们只在容器有剩余空间时才生效。
例如：一个固定高 height: 500px 的容器，里面只有三行各 100px 的内容，那就有 200px 垂直余量，此时 align-content: center 才会让这三行整体垂直居中。
-
align-content失效的常见原因：容器height是auto，或只有一行轨道 -
justify-content失效的常见原因：列用1fr填满宽度，没剩空间可分配 - 注意轴向：Grid 中
justify-*永远管行轴（默认水平），align-*永远管块轴（默认垂直） - 别和 Flexbox 的同名属性混用——Grid 的
align-content触发条件更明确，不依赖flex-wrap
row-gap / column-gap 影响间距，但不改变对齐逻辑
很多人试图靠 gap 来“微调对齐”，其实它只控制轨道之间的空白，和子项在单元格内的位置无关。
真正影响 item2 和 item3 是否紧贴顶部的关键，是 grid-template-rows 的定义方式与 row-gap: 0 的配合——比如用 0fr 1fr 强制第一行不占高，再让两个项都落在第二行起始处。
-
gap是简写，推荐拆成row-gap和column-gap单独控制 -
row-gap: 0并非多余，它能防止自动添加的行间空隙破坏紧凑结构 - 若用
margin替代gap，可能引发行高计算异常（尤其在内容高度不一致时） -
gap不影响align-items行为，但它会影响视觉上“对齐”的感知——比如大gap会让顶部对齐看起来像悬空
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
