如何使用Angular材料确保相等的边距？ （md-grid-list md-grid-tile md-rowspan）

Question

以下是Codepen的示例。

我设置md-row-height="30px"，然后计算md-rowspan，使其等于元素数量+1。（标题加1） < / p>

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