htmlcssangularangular-materialmat-card

CSS to multiple mat-cards responsive

I have a project in Angular material in which I am creating a component with several mat-cards. What I am trying to do is make the screen responsive depending on the width of the cards.

Right now only the card is made smaller but not the titles or the content. And all the cards appear in a single column.

This is my component.html:

<div class="container">
      <mat-card *ngFor="let properties of menuComponent.fillerNav" class = "mat-elevation-z4">
        <mat-card-header>
          <mat-card-title>
            {{properties.name}}
            <mat-icon class="iconMenu">{{properties.icon}}</mat-icon>
          </mat-card-title>
        </mat-card-header>
        <mat-divider></mat-divider>
        <mat-card-content>
          <p>
            total
          </p>
        </mat-card-content>
      </mat-card>
</div>

This is my component.scss:

mat-card {
  width: 20%
}

This is the view of the window with F12:

enter image description here

Solution

  • To make it work on HTML try it this way

    .flex-me 
{   display: inline-flex; 
  flex-flow: row wrap;    
}
mat-card{
    width: fit-content;
}

    Also here is a full example how to create a responsive card grid in Angular using Flex Layout