Align mat-card content(filling blank space issue) - html

Question

I'm working with mat-card in a list and i have a problem with the aligment
Here what i have:
Here what i want:
The problem is that when the size of content inside a mat card increases,next mat card should automatically adjust the space without leaving a blank space corresponding to previous larger space mat-card
I am attaching the corresponding css and html Code:
.works {
padding-left: 47px;
padding-top: 99px;
// display: inline-flex;
}
.work-head {
// width: 330px;
// height: 28px;
font-family: Raleway-SemiBold;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list {
// width: 123px;
// height: 28px;
padding-left: 0px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list1 {
// width: 123px;
// height: 28px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
padding-left: 49px;
color: #000000;
}
.work-detail {
// width: 159px;
// height: 28px;
padding-left: 0px;
text-align: left;
padding-top: 23px;
font-family: Raleway;
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.flexfix {
flex-basis: 0;
}
.work-card {
// margin-right: 26px;
margin-bottom: 26px;
padding-top: 39px;
padding-left: 17px;
padding-bottom: 49px;
padding-right: 10px;
width: 506px;
// height: 244px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
.card-margin{
margin-left: 3%;
}
<div class="works">
<div fxLayout="row layout-wrap">
<div *ngFor="let item of listOfProjects" class="card-margin">
<mat-card class="work-card">
<mat-card-title class="work-head">{{item.name}}</mat-card-title>
<img class="line-align" src="assets/icons/DashBoard/work-card-line.svg" />
<mat-card-content>
<div *ngIf="item.name==='test10'">
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list1">Status:</div>
<div class="work-detail">{{item.projectStatus.name}}</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>

Answer 1

Hope from the below example u will find a solution for ur problem.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorericies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor pretium luctus. Morbi turpis torto pretium luctus. Morbi turpis torto</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulutor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vr risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempoar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor ultricies nisl eget tincidunt. Vestibulum id pulvinar risus. Nam viverra pretium luctus. Morbi turpis tortor</p>
</div>
</div>
<div class="col-12">
<div class="card border p-3 mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Answer 2

This is a common css issue, and you need a masonry layout. You can achieve this, with css column-count rule, and whit inline-block elements. You need to add a media query to change the column-count responsively.
See this article, or this example.
With this, you don't need external CSS or JS library.