如何在auto-fill容器中居中Grid网格项？忽略填充影子项

这问题我做响应式布局时也碰到过，刚好有个简单又不破坏现有Grid功能的解法，完美匹配你的需求：

核心思路：调整网格内容的对齐方式 #

默认情况下Grid布局的justify-content属性值是start，这会让所有网格项（包括自动生成的空轨道）靠左排列，所以你会看到实际的灰色盒子左对齐，空轨道在右侧填充。只需要把这个属性改成center，就能让实际的网格项在容器里居中，空轨道会自动均匀分布在左右两侧，视觉上就像那些“影子”项不存在一样。

具体代码实现 #

假设你的Grid容器和子项基础样式是这样的，只需要添加一行关键代码：

.grid {
  display: grid;
  /* 你原来的列设置，比如自动填充固定宽度的列 */
  grid-template-columns: repeat(auto-fill, 250px);
  gap: 20px; /* 你的间距设置 */
  justify-content: center; /* 这就是关键！ */
  /* 保留你依赖的Grid自动媒体查询相关样式 */
}

.grid-item {
  background-color: #ccc;
  padding: 2rem;
}

为什么这方法可行？ #

• 完全保留了Grid的自动适配能力：不管屏幕宽度怎么变，Grid依然会根据你设置的规则自动生成合适数量的列（包括空轨道）。
• 只是改变了整个网格内容在容器中的水平对齐方式，空轨道会被挤到两侧，实际的内容项自然就居中了。
• 如果需要垂直方向也居中，只需要再加上align-content: center;即可。

内容的提问来源于stack exchange，提问作者Jens Törnell