忽略一个网格列以使整个网格居中，例如具有自动边距

Question

我有以下设置：

网格容器放置在更宽的 div 元素内。网格元素具有适合内容的宽度。 网格具有 auto-1fr-auto-1fr 列。所有列的确切宽度取决于动态内容并且未知（自动列非常窄）。

我希望将完整的网格置于父容器的中心，但是，这样做会忽略第一列（最左边的列）。 （即网格的放置方式应如同仅由 1fr-auto-1fr 列组成）。

我正在尝试各种事情；最让我感兴趣的似乎是将左列的项目宽度设置为 0；然而，这无法解释第 1 列和第 2 列之间的任何间距，如网格列间隙。我希望避免任何在右侧增加额外的未使用空间的事情。

有什么规范的方法可以实现这一点吗？

（在我的示例中，中间的 v 和下面的 ^ 应该对齐）

链接在这里：jsFiddle

或代码：

<style>
.parent{
  width: 600px;
  border: black solid 1px;
}

.grid-container{
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  margin: auto;
  width: fit-content;
  grid-gap: 20px;
}

.grid-dummy{
  height: 30px;
  border-radius: 5px;
  background-color: CornflowerBlue;
}
.mid-indicator{
  margin: auto;
  width: fit-content;
}
</style>
<div class="parent">
  <div class="grid-container">
    <div>1</div>
    <div class="grid-dummy">Just some long content to stretch</div>
    <div> v </div>
    <div class="grid-dummy">Short</div>
        <div>2</div>
    <div class="grid-dummy">Some more</div>
    <div> v </div>
    <div class="grid-dummy">Whatever</div>
  </div>
  <div class="mid-indicator">^
  </div>
</div>

Answer 1

一种方法是有一个不可见的第五列，它是第一列的复制品。

.parent{
  width: 600px;
  border: black solid 1px;
}

.grid-container { 
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  margin: auto;
  width: fit-content;
  grid-gap: 20px;
}

.grid-dummy {
  height: 30px;
  border-radius: 5px;
  background-color: CornflowerBlue;
}

.grid-container>*:nth-child(5n) {
  color: red;
  opacity: 0.2;
}

.mid-indicator {
  margin: auto;
  width: fit-content;
}

<div class="parent">
  <div class="grid-container">
    <div>1</div>
    <div class="grid-dummy">Just some long content to stretch</div>
    <div> v </div>
    <div class="grid-dummy">Short</div>
    <div>1</div>
    <div>2</div>
    <div class="grid-dummy">Some more</div>
    <div> v </div>
    <div class="grid-dummy">Whatever</div>
    <div>2</div>
  </div>
  <div class="mid-indicator">^
  </div>
</div>