1

I am working with mat-card where I want to put mat-cards as 2x1 ie; 2 cards per row in mobile views and 3 cards per row in tab and laptop view.

I followed this example with grid-list and this is what I want to achieve. I tried with mat-card with the same approach and is not working.

I used flex-layout but it is not proper. Any suggestion on how to achieve this?

<div class="cardList" fxLayout="row wrap" fxLayoutAlign="flex-start" fxFlexAlign="stretch" fxLayoutGap="20px">
    <mat-card fxFlexAlign="stretch" *ngFor="let member of members" routerLink="/registration/verify-phone">
        <mat-card-header style="flex-direction: column;" fxFlex="60">
            <mat-card-title style="color: #0663fe; font-weight: 600;">{{member.content}}</mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

Something like this I need to achieve enter image description here

Optimist Rohit
  • 428
  • 6
  • 24

0 Answers0