Как обеспечить равные поля с помощью Angular Material? (md-grid-list md-grid-tile md-rowspan)

Вот пример на Codepen.

Я устанавливаю md-row-height="30px", а затем вычисляю md-rowspan так, чтобы оно равнялось количеству элементов + 1. (плюс один для заголовка)

<md-grid-list  md-cols="1" md-cols-gt-md="3" md-cols-gt-sm="2" md-row-height="30px" md-gutter="5px">
  <md-grid-tile ng-class="tile.className" ng-repeat="tile in vm.tiles" md-rowspan="{{1 + (tile.subItems.length)}}">

    <div layout="column" layout-align="start center">
       <h3>{{ tile.title }}</h3>
       <div ng-repeat="item in tile.subItems">
         {{ item.title }}
       </div>
    </div>

  </md-grid-tile>
</md-grid-list>

Поля не равны:

При проверке DOM я вижу множество вычислений:

Я попробовал другой подход, используя layout="row" - codepen.io, но плитки имеют одинаковую высоту (они не заполняют пространство эффективно)

В целом, я думаю, что я довольно близок, мне просто нужно убедиться, что каждая плитка имеет одинаковые поля, независимо от количества элементов, которые находятся внутри.