掌握CSS Grid对齐需理解四组属性：1. justify-items与align-items控制所有子元素在网格区域内的横向与纵向对齐，如center居中、stretch拉伸；2. justify-self与align-self用于单个子元素独立对齐，优先级高于容器属性；3. justify-content与align-content调节整个网格轨道在容器中的分布，适用于存在剩余空间时的布局，如space-between实现两端对齐；4. 实际应用中可组合使用，如整体居中用justify-items和align-items，网格间距分配用justify-content或align-content，注意仅直接子元素生效，嵌套布局需单独设置。
在使用 CSS Grid 布局时，对齐容器和子元素是构建现代响应式页面的关键。掌握对齐方式能让你更精准地控制网格内容的布局表现。下面介绍常用的对齐技巧，帮助你快速上手。
1. 容器上的对齐属性
Grid 容器可以通过以下两个属性控制子元素的整体对齐方式：
- justify-items：控制子元素在行轴（横向）上的对齐方式。
- align-items：控制子元素在列轴（纵向）上的对齐方式。
这两个属性作用于所有直接子元素，常见取值包括：
- start：靠起点对齐
- end：靠终点对齐
- center：居中对齐
- stretch：拉伸填满（默认值）
例如：
.container {
display: grid;
justify-items: center;
align-items: center;
}
这会让所有子元素在各自网格区域内水平垂直居中。
2. 单个子元素的独立对齐
如果只想调整某个子项的对齐方式，可以使用：
- justify-self：设置单个子元素在行轴上的对齐。
- align-self：设置单个子元素在列轴上的对齐。
用法示例：
.item {
justify-self: end;
align-self: start;
}
这个元素会在其网格单元格内右对齐、顶部对齐，不受容器 justify-items 或 align-items 的影响。
3. 网格轨道之间的整体对齐（间距控制）
当网格容器有剩余空间（比如设置了固定宽高或 minmax），你可以通过以下属性控制整个网格的分布位置：
- justify-content：控制网格整体在行轴方向的对齐（横向分布）。
- align-content：控制网格整体在列轴方向的对齐（纵向分布）。
这些属性在网格轨道总宽度小于容器宽度时生效，常用于多行多列布局的排版优化。可选值类似：
- space-between：两端对齐，中间间距平均分布
- space-around：每个轨道周围分配相等空间
- space-evenly：所有间隙完全相等
- start / end / center：整体靠左、靠右或居中
示例：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: space-between;
}
即使只有三个 100px 的列，它们也会在容器中均匀分开，贴边分布。
4. 实际应用建议
合理组合这些对齐属性，可以应对大多数布局需求：
- 想让所有项目居中？用
justify-items: center; align-items: center; - 想让某个标题靠右显示？给它加
justify-self: end; - 网格整体想在大容器中居中？使用
justify-content: center; - 多行网格之间留白均匀？试试
align-content: space-between;
注意：这些对齐方式只对直接子元素生效。嵌套的 Grid 或 Flex 子项需在其内部单独设置对齐规则。
基本上就这些。灵活运用容器与子元素的对齐属性，能让 Grid 布局既强大又简洁。不复杂但容易忽略细节，多试几次就能熟练掌握。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
