Angular Material Card responsive flexLayout

Question

I want to position an array of cards in such a way that one card is displayed per column on phone, two and three for tab and desktop browser, respectively. I tried: https://angular-u6akh5.stackblitz.io

import { Component } from "@angular/core";
@Component({
  selector: "cards",
  template: `
    <div fxLayout="row" fxLayoutWrap>
      <mat-card
        fxFlex.lg="33%"
        fxFlex.lt-lg="50%"
        fxFlex.xs="100%"
        *ngFor="let num of nums"
      >
        {{ num }}
      </mat-card>
    </div>
  `,
  styles: ["mat-card { max-width: 360px; }"]
})
export class Cards {
  nums = [1, 2, 3, 4, 5];
}

Answer 1

You need to change <div fxLayout="row" fxLayoutWrap> into <div fxLayout="row wrap">.

fxLayoutWrap has been removed, and this is the way to write it correctly nowadays. Also, in your example, you forget to install the packages FlexLayoutModule - After you do those two things, everything should work as intended

Answer 2

You can also achieve this with pure CSS grid instead of depending on FlexLayoutModule. You can achieve responsiveness by combining repeat with minmax.

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-column-gap: 1rem; // optional
    grid-row-gap: 1rem; // optional
}

<div class="card-container">
  <mat-card *ngFor="let num of nums">{{num}}</mat-card>
</div>

Here's a working, more elaborate example:

https://www.jitblox.com/project/6ieC-YQVdG/responsive-cards