css网格-折叠空列并对齐同级内容

无法找到如何使用css网格折叠空列并围绕此空块对齐同级内容的答案

在这个例子中，我手动地，并作为一个例子展示了当绿色块单独存在时，它应该如何变平。 换句话说，如果缺少某个块，则其他所有块都应居中。我怎样才能做得更好

HTML

<div class="grid">
  <div class="grid__child grid__child--aside">Aside</div>
  <div class="grid__child grid__child--controllers">
    <div class="grid__child-label">
      Just some absolute label for example
    </div>
    Controller
  </div>
</div>
<div class="grid">
  <div class="grid__child grid__child--controllers">
    <div class="grid__child-label">
      Just some absolute label for example
    </div>
    Single Controller
  </div>
</div>
<div class="grid">
  <div class="grid__child grid__child--single grid__child--controllers">
    <div class="grid__child-label">
      Just some absolute label for example
    </div>
    Expected align, when it's single
  </div>
</div>

---

这在CSS网格中是不可能的…如果是的话，它就不会是一个网格。自动调整CSS属性如何。它合适吗？不……一旦你在第一列（旁边）有了东西，它就为那一列设置了宽度，不管里面有没有东西。看起来你真正想要的是行而不是网格。我认为这应该是在使用网格模板区域时折叠空列和它的相对间隙的某种方式，因为有时我们不知道模板区域是否为空。。。

.grid {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-areas: 'aside aside aside . controllers controllers controllers controllers controllers';
  margin: 16px auto;
  width: 300px;
  &__child {
    text-align: center;
    padding: 4px 8px;
    color: black;
    font-family: sans-serif;
    &--aside {
      grid-area: aside;
      background-color: lightblue;
    }
    &--controllers {
      position: relative;
      grid-area: controllers;
      background-color: gold;
    }
    &--single {
      background-color: springgreen;
      transform: translateX(-50%);
    }
    &-label {
      position: absolute;
      right: 100%;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translate(-16px, -50%);
      background-color: gray;
      font-size: 0;
      line-height: 0;
      letter-spacing: -1px;
    }
  }
}