Material Angular 填充网格图块

Question

使用https://material.angular.io/components/grid-list/overview：

我创建了一个 md-grid-list，它应该有 2 cols，在每个 md-grid-tile 里面，我想放置一个 md-card，它应该填满整个图块。

目前 md-grid-list 看起来像这样：

html代码-没有第二个md-card:

  <md-grid-list cols="2" rowheight="2:1">
  <md-grid-tile>
  <md-card class="data-representer-card">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>
  </md-grid-tile>
</md-grid-list>

如何使 md-card 拉伸并填充屏幕截图中标记为蓝色的整个区域？

Answer 1

基于@talentedandrew

我花了一段时间才弄清楚如何包含 flex-layout 但现在它按预期工作了：

我先后遵循了这个指南：

重构 html 代码后，我得到了预期的结果：

  <md-card class="data-representer-card" fxFlex="50">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>

  <md-card class="data-representer-card" fxFlex="50">
    <md-card-title>Pick up from where you left</md-card-title>
    <md-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
        very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
      </p>
    </md-card-content>
    <md-card-actions>
      <button md-button>LIKE</button>
      <button md-button>SHARE</button>
    </md-card-actions>
  </md-card>

现在两个卡片元素彼此相邻，并且位于视图的顶部。

Material Angular 填充网格图块

Material Angular Fill Grid Tile

css

angular-material2