thisiszoaib

<div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start">
  <div class="card" fxFlex="30">
  </div>
</div>

thisiszoaib

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatCardModule } from "@angular/material/card";
import { MatToolbarModule } from "@angular/material/toolbar";
import { MatButtonModule } from "@angular/material/button";
import { FlexLayoutModule } from "@angular/flex-layout";

thisiszoaib

<mat-toolbar color="primary"> Card view demo </mat-toolbar>
<div class="content">
  <mat-card class="mat-elevation-z4">
    <mat-card-header>
      <mat-card-title>Himalayan Peaks</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>

thisiszoaib

.content { 
  padding: 16px; 
}

.content > mat-card { 
  width: 200px; 
}

thisiszoaib

<div class="content" fxLayout="row wrap">
  <div fxFlex="25%" *ngFor="let num of [1,2,3,4,5,6,7]">
    <mat-card class="mat-elevation-z4">
      <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>

thisiszoaib

<div class="content" 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" >
      <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.

thisiszoaib

<mat-toolbar color="primary">
  <span>Card view demo</span>
  <button mat-button (click)="toggleGridColumns()" fxHide.lt-md>
    <span *ngIf="gridColumns === 4">Three Columns</span>
    <span *ngIf="gridColumns === 3">Four Columns</span>
  </button>
</mat-toolbar>

thisiszoaib

mat-toolbar {
    justify-content: space-between;
}
.content {
    padding: 16px;
}
.content > mat-card {
    margin-bottom: 16px;
}

thisiszoaib

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  

thisiszoaib

<div [fxFlex]="(100/gridColumns) + '%'" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let num of [1,2,3,4,5,6,7]">
...