How to fit images set like facebook in bootstrap css & angular 7 - css

Question

I want to fit images set like facebook photo albums showing in newsfeed.
When I'm trying this it will show with huge spaces.
here is my code
html code
<div class="pCollection">
<div class="row pCollection-header">
<div *ngFor="let photo of getPhotos(); let i=index" class="col-md-6">
<div *ngIf="photos.length > 4">
<div *ngIf="i != 3">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
<div class="overlay">
<p *ngIf="i == 3" class="restImages"> + {{photos.length - 4}}</p>
</div>
</div>
</div>
</div>
<div *ngIf="i == 3">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
<div class="overlay">
<p class="restImages"> + {{photos.length - 4}}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="photos.length < 5">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
</div>
</div>
</div>
</div>
</div></div>
this is my css code
.pCollection-header .col-md-6 {
padding-left: 0;
padding-right:0;
}
.pCollection {
overflow: hidden;
}
.card{
cursor: pointer;
}
.card-img-wrapper {
position: relative;
/* background: rgba(0, 0, 0, 0.7); */
}
.card-img-wrapper img{
background: rgba(0, 0, 0, 0.7);
}
.overlay{
position: absolute;
top: 35%;
left: 36%;
z-index: 1000;
}
.restImages {
color: #fff;
font-size: 35px;
}
#media (min-width: 576px) {
.restImages {
font-size: 24px;
}
}
#media (min-width: 768px) {
.restImages {
font-size: 24px;
}
}
#media (min-width: 992px) {
.restImages {
font-size: 35px;
}
}
#media (min-width: 1200px) {
.restImages {
font-size: 35px;
}
}
this is the screenshot for this code
this is the screenshot for what I'm expecting
please anyone know how to do this,please help me.I wasted few days for this issue.

Answer 1

You can use jQuery plugin for this if you want. You can see the demo it's exactly what you want.

Answer 2

Try this CSS for the stackblitz which you created...
p {
font-family: Lato;
}
.paddingReset>div{
padding:0;
}
.img-responsive-custom{
max-width: 100%;
display:block;
height: auto;
}
.left-set>img{
border-right:2px;
border-bottom: 0px;
border-left:2px;
border-style: solid;
border-color: #fff;
}
.right-set>img{
border-top:1px;
border-right:2px;
border-left:2px;
border-style: solid;
border-color: #fff;
}
.column9Custom{width:75%;}
.column3Custom{width:25%;}