使用 justify-content、align-content 和 gap 属性可精准控制 CSS Grid 布局的对齐与间距：justify-content 调整网格在行轴的水平对齐，align-content 控制列轴的垂直分布，gap 统一设置网格项间的间隙，三者结合能高效构建美观、响应式的网格布局。
在使用 CSS Grid 布局时，容器内的对齐与间距控制是实现美观、响应式布局的关键。通过 justify-content、align-content 和 gap 属性，可以精准控制网格轨道之间的对齐方式和间距，让布局更灵活、更易维护。
justify-content：控制网格沿行轴的对齐
当网格容器的总宽度小于其内容区域宽度时，justify-content 决定网格整体在行轴（水平方向）上的对齐方式。
常见取值包括：
- start：左对齐（默认）
- end：右对齐
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个网格项周围有相等空间
- space-evenly：所有间距完全均等
例如，让一个宽度不足全屏的网格居中显示：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
}
align-content：控制网格沿列轴的对齐
当网格容器的高度大于所有行轨道总高度时，align-content 控制网格整体在列轴（垂直方向）上的分布方式。
它的取值与 justify-content 类似：
- start：顶部对齐（默认）
- end：底部对齐
- center：垂直居中
- space-between：首尾行贴边，其余均匀分布
- space-around：每行上下有相等空间
- space-evenly：所有垂直间距均等
适用于多行网格且容器有额外垂直空间的情况：
.grid-container {
display: grid;
grid-template-rows: repeat(2, 80px);
height: 500px;
align-content: space-between;
}
gap：设置网格项之间的间距
gap 是简化网格间距设置的核心属性，替代了旧的 grid-gap。它可以统一设置行与列的间距，或分别定义。
用法示例：
- gap: 10px; — 行与列间距均为 10px
- gap: 10px 20px; — 行间距 10px，列间距 20px
gap 的优势在于无需额外 margin 或负边距技巧，避免折叠问题，语义清晰：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
注意：gap 不会影响容器边缘，只作用于网格项之间。
综合实践建议
在实际开发中，结合这三个属性能快速构建整洁布局。
比如创建一个居中、有呼吸感的卡片网格：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
justify-content: center;
align-content: start;
min-height: 400px;
}
这里使用 repeat(auto-fit) 实现响应式列数，gap 提供舒适间距，justify-content: center 水平居中，而 align-content: start 避免垂直拉伸。
基本上就这些。掌握 justify-content、align-content 和 gap 的配合使用，能让 Grid 布局既简洁又强大，减少 hack 写法，提升开发效率。
