Grid布局核心是gap控间距、三层对齐（容器级justify/align-content、单元格级justify/align-items、项目级justify/align-self），优先用gap而非margin，各层属性有明确覆盖优先级。
Grid 布局处理间距与对齐，核心就三点：用 gap 控制项目间空隙，用 justify-/align- 系列属性分层控制对齐（容器整体、单元格内、单个项目），且各层级有明确优先级。
统一管理间距：优先用 gap，别碰 margin
gap 是 Grid 专为间距设计的属性，干净、无副作用：
- gap: 12px —— 行距列距都设为 12px
- gap: 12px 20px —— 先写 row-gap（垂直间距），再写 column-gap（水平间距）
- row-gap: 8px; column-gap: 16px —— 分开写更清晰，尤其当行列间距不同时
- gap 只作用于网格项之间，不会影响容器边缘，也避免 margin 折叠或外溢问题
三层对齐：从整体到个体逐级覆盖
对齐不是“一刀切”，而是按作用范围分三层，后设的会覆盖前设的：
-
容器级整体偏移（网格块在父容器里的位置）：
– justify-content 控制水平（start / center / space-between 等）
– align-content 控制垂直（仅当多行/多列且有剩余空间时生效） -
单元格内默认对齐（所有子项在各自网格区域中的位置）：
– justify-items 水平（start / center / stretch）
– align-items 垂直（默认都是 stretch，即拉满高度/宽度） -
单个项目微调（覆盖上面两层）：
– justify-self 和 align-self 写在具体子元素上，比如某个卡片要右对齐、另一个要顶部对齐
常见组合建议
实际写样式时，推荐这样搭配：
- 先设 display: grid + grid-template-columns（或 rows）搭出结构
- 紧跟 gap 统一留白，例如 gap: 1rem
- 用 justify-items: center; align-items: start 让所有内容水平居中、顶部对齐
- 对特殊项单独加 justify-self: end 或 align-self: flex-end 调整
- 如果网格没占满容器，再补 justify-content: center 居中整个网格块
注意几个易错点
有些行为容易误解，提前避开：
- align-content 不是给单行网格用的——只有存在多行轨道且容器有剩余高度时才起作用
- stretch 对文字类内容无效——它只拉伸块级盒子；纯文本需配合 min-height 或 display: flex 才能撑高
- gap 不能替代 padding——它不增加项目自身内边距，只是项目之间的“呼吸感”
- justify-self/align-self 的值必须和 justify-items/align-items 一致，不支持像 flex 那样用 flex-start/flex-end
