材料角填充网格

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，但现在它按预期工作：

我依次跟着这些指南：

• https://github.com/angular/flex-layout/wiki/Developer-Setup

• https://github.com/angular/flex-layout/wiki/Fast-Starts

之后，我在重构我的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>

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