[SOLVED] Angular Materials Cards Layout

Angular Materials Cards Layout

I'm using Angular Mat Card and I have a button that create new cards in the database every time I click the button but the new card display right at the bottom of existing card with out any gap between the two so if you guys can help me figure it out how to make the gap/margins it'll be awesome. Thanks

This is what it look like right now

This is what I want to look like

 .clickable {
     cursor: pointer;
 }
 .mat-chip {
     background-color: #DFDFDF;
     text-align: left;
     font: Regular 16px/21px Roboto;
     letter-spacing: 0.29px;
     color: #000000DE;
     opacity: 1;
     border-radius: 18px;
     opacity: 1;
 }
 .mat-card {

     margin-left: -10px;
     padding: 0;
     margin-bottom: 20px;;
     width: 350px;
     height: auto;
     cursor: pointer;
     
   
   }
 .chipMargin{

     margin-left: 5%;
     margin-right: 5%;
 }
 .mat-chip-list {
   display: table-row;
   flex-direction: column;
 }
@media screen and (min-width:768px)
{

.divider {
   height: 90%; 
   position: absolute; 
    left: 900px;
    right: 830px;
    top: 40px; 
 }
.column {
    float: left;
    width: 950px;
    padding: 10px;
    margin-left: 30px;
    margin-top: 10px;

    
}
.column2 {
    width: 730px;
    float: right;
    right: 70px;
    position: absolute;
  


}
.row:after {
    content: "";
    display: table;
    clear: both;
  }

  .inline-block {
    display: inline-block;
  }
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<h2 style="font-size: 1.5em; margin-left: 40px; margin-top: 20px; color: white;">Home</h2>
<div matSubheader>
    <span style="font-size: 1.2em; margin-left: 20px; color: white;">My Workspaces</span>
    <button mat-stroked-button color="accent" matTooltip="New Workspace" (click)="newWorkspaceClick()">
        <mat-icon>add</mat-icon> New
    </button>
</div>

  <div class="column">
    <mat-nav-list>
        <div class="row">
                <div>
                  <mat-card class="example-card"><a mat-list-item routerLink="workspace/{{ws.guid}}" *ngFor="let ws of workspaces" >
                      <mat-icon matListIcon color
                          matTooltip="{{ws.type == WorkspaceType.user ? 'User Workspace' : 'Group Workspace'}}">
                          
                      </mat-icon>
                      <span matLine>Stack One</span>
                      <span matLine class="hint"></span>
                    </a>
  
                  </mat-card>
                  
                </div>       
        </div>
    </mat-nav-list>
  </div>
  
  <mat-divider [vertical]="true" class="divider"></mat-divider>
  <div style="position: absolute;font-size: 1.2em; right: 630px;top: 80px; color: white;"> Recently Edited Charts</div>
  <div class="column2">
    <mat-nav-list>
      <div class="row">
              <div>
          
              </div>       
      </div>
  </mat-nav-list>
  </div>

Solution

You just need to add margin-bottom CSS property to your card like so:

.mat-card:not(:last-child) {
  margin-bottom: 20px;
}

EDIT:

I took a closer look to your code and I noticed that you're not creating cards, you're creating list items inside of the card. Your ngFor directive is placed on the a tag. Place the ngFor directive on the card or if you want to create list items add the following code:

.mat-list-item:not(:last-child) {
  margin-bottom: 20px;
}