css - 如何让网格儿童在网格容器中“粘”在一起？

Question

有没有办法让网格容器的孩子“聚集”在父容器的中间？

我的 CSS：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  height: 100vh;
}

.box {
  width: 40%;
  height: 40%;
}

以下图片中的演示：

原始位置：

目标位置：

标签： csscss-grid