I have md-grid-list which contains cards. I have set the number of columns to 4 in the grid-list. When I resize the browser window, the grid list will not resize according to the browser window and contents in the card gets overlapped and looks ugly. How do I set the grid-list to display dynamically according to the browser window size? Or How to set the number of cards in the grid according to the browser window size?
<md-grid-list cols="4" md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="12" rowHeight="250px" gutterSize="20px">
<md-grid-tile *ngFor="let data of myData">
<md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >
<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>