CSS网格-折叠空列并对齐兄弟姐妹内容

Question

无法找到关于如何使用css-grid折叠空白列并对齐该空白块周围的兄弟内容的答案。

在该示例中，我手动进行了一个示例，并演示了绿色块单独放置时应如何变平。 换句话说，如果缺少某个块，则应将其他所有内容居中。我如何做得更好？

https://jsfiddle.net/qsLgxtcp/3/

JSFiddle preview

HTML

animalsObservable.subscribeOn(AndroidSchedulers.mainThread()).subscribe(getAnimalsObserver())

SCSS

<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>