如何使用 Angular Material 确保相等的边距？ (md-grid-list md-grid-tile md-rowspan)

Question

这是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 - 但是瓷砖的高度相同（它们不能有效地填充空间）

---

总而言之，我认为我已经很接近了，我只需要确保每个图块具有相同的边距，无论里面有多少项目。

Answer 1

使用layout-fill - CodePen

标记

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

来自docs：