Mat-card is not specifying gap below and above the row - css

Question

I am trying to specify some gap between two rows while displaying mat cards. But it is not showing properly after using flex.
This is the HTML file:-
<div fxLayout="row wrap" fxLayoutAlign="space-around">
<mat-card class="list-card" *ngFor="let uri of urlData" fxLayoutGap="20px">
<mat-card-header>
<mat-card-title>{{uri.title}}</mat-card-title>
<mat-card-subtitle>3 weeks ago</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg(58 kB)
https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg
" alt="img alt title">
<mat-card-content>
<a href="https://medium.....64" class="mat-caption">
{{uri.documentURL}} </a>
<!-- <section> -->
<mat-chip-list>
<mat-chip>Angular</mat-chip>
</mat-chip-list>
<!-- </section> -->
<p>
{{uri.description}}
</p>
</mat-card-content>
<mat-card-actions>
<mat-icon>share_outline</mat-icon>
<mat-icon>bookmark_outline</mat-icon>
</mat-card-actions>
</mat-card>
</div>
This is the css:-
.list-card{
max-width: 260px;
}

Answer 1

There are two options to do that
1: Use flexLayoutGap as you had done for row gap, but you need to customize your structure as mention here
for bottom gap you need to use flex column as well.
2: Use margin-bottom on your card class .list-card
.list-card{
margin-bottom: 20px;
}

Answer 2

.list-card{
max-width: 260px;
margin: 10px;
}
try this code