在12列CSS网格中居中网格项

我喜欢使用CSS网格，但我一辈子都搞不懂这一点——我有一个随机数目的图像，这些图像将被插入CSS网格容器中。和下面的左对齐不同，我希望网格项和12列对齐

.section-images {
  grid-gap: var(--page-margins);
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.section-image {
  grid-column: span 4;
  width: 100%;
}

所以我想要下面这个，而不是上面的

因为可能有5个图像，6个图像，13个等等。它需要是自动的-我相信有一个简单的方法来做到这一点

因此，如果它们是多行的，您将有：

非常感谢,

---

Simon

请向我们展示您的代码谢谢您已修改是否有理由使用CSS网格而不是Flexbox？如果我理解您试图正确执行的操作，那么看起来您可以将图像放在flexbox行中，并进行包装，然后调整内容：中心。