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

Question

我喜欢使用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）