根据动态内容计数居中 CSS 网格项目

Question

我有一系列从数据库中获取的图像，当添加三个或更多图像时，它会直观地显示三列。

当存在的图像少于三个时，因为我正在使用display: grid;它，所以它当前位于父容器的左侧（在代码示例中，我刚刚使用红色框来表示图像）。

无论如何，是否有这样的设置，以便当存在一两个图像时，这些图像可以对齐到父元素的中心。我很感激我可以使用 javascript 来检测存在多少图像，如果少于三个，则添加一个类并将包装器更改为display: flex，但我想知道仅使用 CSS 是否可以实现这样的布局？

由于布局的性质，当存在三个以上图像时，我确实需要使用 CSS 网格。

注意：我已注释掉 HTML 中的两个红色框，以显示仅存在一个红色框时的初始问题。

代码笔：https ://codepen.io/anna_paul/pen/xxXrVJQ

body {
  display: flex;
  justify-content: center;
  margin: 0
  width: 100%;
  height: 100vh;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
  max-width: 1250px;
}

.box {
  width: 200px;
  height: 200px;
  background: red;
}

<div class="wrapper">
  <div class="box"></div>
<!--   <div class="box"></div>
  <div class="box"></div> -->
</div>

Answer 1

像下面这样做：

.wrapper {
  display: grid;
  grid-auto-flow:column; /* column flow */
  justify-content:center; /* center everything */
  grid-gap: 1rem;
  max-width: 600px;
  border:1px solid;
  margin:10px auto;
}
/* make sure you only have 3 columns*/
.box:nth-child(3n + 1) {grid-column:1}
.box:nth-child(3n + 2) {grid-column:2}
.box:nth-child(3n + 3) {grid-column:3}
/**/
.box {
  width: 100px;
  height: 100px;
  background: red;
}

<div class="wrapper">
  <div class="box"></div>
</div>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>