0

I am using "@angular/material": "2.0.0-beta.2" version. To display tiles, I have used md-card inside md-grid-list. I have added the attribute rowHeight to the md-grid-list. Even though the rowHeight is defined, the cards in the row are of not the same height. What attribute I need to use with the md-card to have the same height for all the cards in the row?

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightblue'">    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>
tanmay
  • 7,761
  • 2
  • 19
  • 38
user2301
  • 1,857
  • 6
  • 32
  • 63

1 Answers1

1

Set 100% minHeight attributes on your md-card to adjust the height only and set minwidth also to fill the md-grid-tile

Like:

[style.minHeight]="'100%'" [style.minWidth]="'100%'"

See Plunker for example.

anoop
  • 3,812
  • 2
  • 16
  • 28