angular 2 material grid list with card

Question

I am facing issue in angular 2 material grid list with cards.

I want to display cards inside grid list but it is not responsive

Here is the code:

<md-grid-list cols="4">
  <md-grid-tile *ngFor="let card of cards">
    <md-card>
      <img md-card-image src="{{card.image}}">
      <md-card-content>
        {{card.content}}
      </md-card-content>
    </md-card>
  </md-grid-tile>
</md-grid-list>

You forgot `flex`. Please take a look at [this post](http://stackoverflow.com/questions/31726180/trying-to-have-a-grid-of-card-with-angular-material) as well. — flashjpr, Feb 17 '17 at 12:10
thanks @flashjpr . i am trying to use [ng2-flax-layout](https://www.npmjs.com/package/ng2-flex-layout) & but still same problem here is the code ----- — e kanojia, Feb 17 '17 at 12:44

score 1 · Answer 1 · answered Apr 19 '17 at 08:43

I don't have the reputation to comment so i'll write it as an answer - sorry about that.

You have to be careful setting a fixed width when wanting a responsive view. Try removing the width off of your view, and see what happens. Preferably set your width with flex. Also if you are using material design, they suggest using fxFlex with their design as pr documentation under layout here - link to fxFlex

score 1 · Answer 2 · answered Feb 15 '19 at 13:17

Use Following code in the component.ts file

ngOnInit() {
        this.event1 = this.event2 = this.event3 = new EventListComponent();
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }
      onResize(event) {
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }

and use "columns" varialble in your HTML file. like

<mat-grid-list
[cols]="columns"

(window:resize)="onResize($event)">

score -1 · Answer 3 · answered Oct 01 '17 at 10:19

-1

Try changing this

<md-grid-list cols="4">

To

<md-grid-list cols="4" rowHeight="500px" gutterSize="10px">

answered Oct 01 '17 at 10:19

Isurendrasingh

432
7
20

angular 2 material grid list with card

3 Answers3