在CSS Grid布局的实际应用中，当网格容器的列数固定，而子元素总数无法刚好填满整数行时，最后一行就会出现不完整的情况，默认情况下这些剩余元素会左对齐排列，影响整体页面的视觉一致性。下面介绍几种常用的居中布局策略。
策略一：使用justify-content配合auto外边距
这种方式的核心是让网格容器开启弹性对齐能力，同时给不完整行的元素设置左右auto外边距，实现居中效果。首先给网格容器设置固定的列数和列宽，然后开启justify-content: center，再给网格子元素设置margin: 0 auto。
/* 网格容器样式 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px); /* 固定3列，每列宽200px */
gap: 20px; /* 网格间隙20px */
justify-content: center; /* 整体网格内容居中 */
padding: 20px;
background-color: #f5f5f5;
}
/* 网格子元素样式 */
.grid-item {
width: 200px;
height: 150px;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto; /* 单个元素水平居中 */
}策略二：使用伪元素补全缺失列
这种思路是通过给网格容器添加伪元素，补全不完整行缺失的列，让最后一行也形成完整的网格行，再配合对齐属性实现居中。伪元素的宽度要和正常网格列宽一致，高度设为0避免占用额外空间。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
gap: 20px;
justify-content: center;
padding: 20px;
background-color: #f5f5f5;
}
/* 用伪元素补全缺失列，假设最多缺失2列，这里生成2个伪元素 */
.grid-container::before,
.grid-container::after {
content: "";
width: 200px; /* 和正常列宽一致 */
height: 0; /* 不占用垂直空间 */
}
.grid-item {
width: 200px;
height: 150px;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}策略三：使用grid-auto-flow和justify-items
如果网格子元素的数量是动态的，还可以结合grid-auto-flow和justify-items属性，让所有网格项（包括不完整行的项）都在自身的网格区域内居中，再配合容器的整体对齐实现效果。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
gap: 20px;
justify-content: center;
justify-items: center; /* 每个网格项在自身区域内居中 */
padding: 20px;
background-color: #f5f5f5;
}
.grid-item {
width: 200px;
height: 150px;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}三种策略的适用场景对比
| 策略名称 | 适用场景 | 优缺点 |
|---|---|---|
| justify-content配合auto外边距 | 子元素宽度固定，数量可动态变化 | 实现简单，兼容性好；需要手动给子元素加外边距 |
| 伪元素补全缺失列 | 列数固定，已知最多缺失列数 | 无需修改子元素样式；伪元素数量需要提前预估 |
| grid-auto-flow和justify-items | 需要所有网格项都保持居中（包括完整行） | 代码简洁，统一控制；会对完整行的元素也生效 |
注意事项
- 如果网格容器宽度自适应，需要确认
justify-content: center的生效条件，避免容器宽度不足导致居中失效。 - 使用伪元素补全时，如果实际缺失列数少于伪元素数量，不会影响布局，多余的伪元素会被忽略。
- 如果子元素宽度不固定，需要调整
grid-template-columns的取值，比如使用repeat(3, 1fr)配合最大宽度限制，再结合对应策略实现居中。