Angular 4 - 根据计算拆分为指定的列

Question

我正在尝试像Angular 4中的code pen那样进行网格布局。因为我刚开始使用ng4，所以我有点卡住了。

问题是我不想在每列中添加偶数项。 我们的想法是检查每次迭代，哪个列具有最小高度并向其添加项目。 我真的不知道如何在ng4中这样做，我试着这样做：

<div class="c-grid clearfix">
  <div
    class="c-grid-col"
    *ngFor="let col of cols"
    #colsRef
  >
    <template *ngIf="shouldAdd()">
      <app-grid-item
        *ngFor="let item of items"
      ></app-grid-item>
    </template>
  </div>
</div>

但是我无法真正发挥作用，任何提示或线索？ 感谢