0

I want to align the unequal heighted mat-cards.

I tried with flexlayout npm but still there is some space.

Code

    <div fxLayout="row wrap" fxLayoutGap="16px grid">
        <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let num of [1,2,3,4,5,6,7]">
            <mat-card class="mat-elevation-z4" [style.height]="num===1 ? '600px' : 'auto'">
                <mat-card-header>
                    <mat-card-title>Mountains {{num}}</mat-card-title>
                </mat-card-header>
                <img mat-card-image src="./../assets/images/mountains.jpg">
                <mat-card-content>
                    <p> The Himalayas is a mountain range in Asia. </p>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-button>LIKE</button>
                    <button mat-button>SHARE</button>
                </mat-card-actions>
            </mat-card>
        </div>
    </div>
</div>

Current Output enter image description here

Rabeesh
  • 31
  • 9
  • As the tag description says, please: "When using this tag also include the more generic [angular-material] and [angular] tags where possible." – DBS Sep 13 '22 at 14:44

0 Answers0