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

Question

这是关于 Codepen 的例子.

我正在设置 md-row-height="30px" 然后计算 md-rowspan 使其等于元素数 + 1。< em>(头部加一)

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

---

总而言之，我认为我已经很接近了，我只需要确保每个图 block 都有相同的边距，而不管里面的元素有多少。

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 :