cssangularflexboxangular-materialangular-flex-layout

Angular Flex Layout row wrap with grid align not working

I've Angular v13 application with @angular/flex-layout also v13. The issue is Flex layout of type row wrap with Grid alignment is not working as expected. Below is the html code block. The application is hosted in stackblitz. If I remove the grid from fxLayoutGap, the layout is getting rendered without gutter space for second/subsequent rows.

<div class="cards-container" style="width: 100%; syntax: 100%;">
  <div
    fxLayout="row wrap"
    fxLayoutAlign="start start"
    fxLayoutGap="32px 12px grid"
  >
    <ng-container *ngFor="let item of cards">
      <mat-card>
        <mat-card-header>
          <mat-card-title>{{ item }}</mat-card-title>
          <mat-card-subtitle>subtitle</mat-card-subtitle>
        </mat-card-header>
        <img
          mat-card-image
          height="240px"
          width="240px"
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          alt="Photo of a Shiba Inu"
        />
        <mat-card-content> </mat-card-content>
        <mat-divider inset></mat-divider>
        <mat-card-actions>
          <button mat-button>Ok</button>
        </mat-card-actions>
        <mat-card-footer>
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </mat-card-footer>
      </mat-card>
    </ng-container>
  </div>
</div>

How to configure @angular/flex-layout row wrap with grid?

EDIT

Expected output

Solution

  • Here is the solution, updated code can be accessed at stackblitz. Basically we need to wrap a div around mat-card and add fxFlex with percentage. In my case I had set it to 25 so that 4 cards come in first raw.

    <div class="cards-container" style="width: 100%; syntax: 100%;">
  <div
    fxLayout="row wrap"
    fxLayoutAlign="start start"
    fxLayoutGap="32px 12px grid"
  >
    <ng-container *ngFor="let item of cards">
    <div fxFlex="25">  
      <mat-card>
        <mat-card-header>
          <mat-card-title>{{ item }}</mat-card-title>
          <mat-card-subtitle>subtitle</mat-card-subtitle>
        </mat-card-header>
        <img
          mat-card-image
          height="240px"
          width="240px"
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          alt="Photo of a Shiba Inu"
        />
        <mat-card-content> </mat-card-content>
        <mat-divider inset></mat-divider>
        <mat-card-actions>
          <button mat-button>Ok</button>
        </mat-card-actions>
        <mat-card-footer>
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </mat-card-footer>
      </mat-card>
    </div>
    </ng-container>
  </div>
</div>