掌握CSS Grid对齐与间距：使用justify-items和align-items设置子元素主轴与交叉轴对齐，justify-content和align-content控制整体分布，gap属性统一管理行列间距，优先级上justify-self和align-self可单独调整特定子项，推荐结合使用以实现灵活、响应式布局。
在使用 CSS Grid 布局时，子元素的对齐方式和间距控制是构建美观、响应式页面的关键。通过合理使用对齐属性和间距设置，可以轻松实现复杂的布局效果。
网格容器中的对齐方式
Grid 容器提供了两组对齐属性：一组用于沿行轴（主轴）方向，另一组用于列轴（交叉轴）方向。
justify-items 控制网格项在单元格内的水平对齐（主轴方向）：
- start：左对齐
- end：右对齐
- center：居中对齐
- stretch：拉伸以填满整个单元格（默认值）
align-items 控制垂直对齐（交叉轴方向）：
立即学习“前端免费学习笔记（深入）”；
- start：顶部对齐
- end：底部对齐
- center：垂直居中
- stretch：拉伸填充（默认）
若想对某个特定子元素单独设置对齐，可使用 justify-self 和 align-self，它们作用于单个网格项，优先级高于容器的 justify-items 和 align-items。
整体内容对齐（容器级）
当网格轨道总尺寸小于容器尺寸时，可通过以下属性控制整体网格内容的对齐：
justify-content 处理行轴方向（水平）的对齐：
- flex-start：网格靠左
- flex-end：靠右
- center：整体居中
- space-between：两端对齐，中间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：所有间隙完全均分
align-content 控制列轴方向（垂直）的对齐，取值与 justify-content 相同，适用于多行轨道存在空余空间的情况。
间距控制：gap 的使用
Grid 布局推荐使用 gap 属性来设置网格项之间的间距，取代传统的 margin 调整方式，更加直观且易于维护。
- row-gap：设置行与行之间的间距
- column-gap：设置列与列之间的间距
- gap：同时设置行列间距（如 gap: 10px; 或 gap: 10px 20px;）
gap 不会影响网格容器边缘，只作用于项目之间，避免了 margin 叠加或外边距溢出的问题。例如：
grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }这样每列之间有 16px 的水平间距，每行之间也有 16px 的垂直间距。
实际应用建议
在实际开发中，建议优先使用 gap 管理间距，避免依赖 margin 导致布局错乱。对齐方面，先设置容器的 justify-items 和 align-items 统一风格，再针对特殊子项用 justify-self 或 align-self 微调。当网格轨道未占满容器时，利用 justify-content 和 align-content 来优化整体视觉分布。
基本上就这些，掌握好对齐与间距的组合，Grid 布局会非常灵活且可控。
