css - CSS Grids：自动水平居中单元格

Question

我有一个基于 12 列布局的 3 列 CSS 网格。它可能有 1 个单一内容（1 列 1 行）到许多（导致多列多行）。我正在使用的 CSS

.grid {
  display: grid;
  grid-gap: var(--gap-vertical) var(--gap-horizontal);
  grid-template-columns: 1fr 1fr 1fr;
}

不水平居中 che 单元格，例如，在这样的情况下：

<div class="grid">
  <div>
    Content 1
  </div>
  <div>
    Content 2
  </div>
</div>

在任何情况下，我都需要将单元格自动水平居中（从 1 个内容到多行的多个内容）。

在我只有 2 个单元格的内容和我想要的内容的情况下。

注意：我必须处理这个保持 CSS 网格（没有 Flex 或其他）。

标签： csscss-gridcentering