不知道列数-居中对齐

Question

情况：

在我正在执行的站点中，将有一个部分不知道它将要包含多少列，并且需要允许用户根据自己的需要创建更多列

到目前为止，问题是，当列不占据页面宽度时，有必要对齐中心。

我已经提出了一个解决方案，但是我不知道这种情况是否最合适，主要是因为页面的响应能力。

我还认为我会使用javascript来实现这一目标，但我宁愿只使用CSS。

有没有建议？

意图的图片

几列

带有用于占据页面的列

找到解决方案代码。

.container {
    display: table;
    margin: 0 auto;
}

.container__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: 100px;
    height: 200px;
    background: red;
}

.card:not(:last-child) {
    margin-right: 20px;
}

 <div class="container">
      <div class="container__content">
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
          <div class="card"></div>
      </div>
  </div>