Css - auto grid list of photos(angular 6) - css

Question

I want to create a grid list that dynamically works with Angular 6 *ngFor directive. My question/problem is that I have Array of 105 objects in firebase. Structure of object is like:
{src: 'some url', alt: 'title'}
Now I have 2 different type of photos, one horizontal, one vertical. I want to create auto filling section that will fill up empty space, I know that can be do with grid list in css3. But how to connect that with :
<div class="row">
<div class="imageGallery1 " *ngFor="let image of galleryList">
<a [href]="image.src" [title]="image.alt">
<img [src]="image.src" [alt]="image.alt" style="max-width: 300px; max-height: 300px; object-fit: contain; padding-right: 20px;" />
</a>
</div>
styles are only for create temp thumbnails
Is there any way to check what kind of type each photo has? (vertical, horizontal) and later auto sortu out them ? Please point me if there's any other way to do this

Answer 1

I found solution on youtube course of grid css.
https://www.youtube.com/watch?v=t6CBKf8K_Ac
css:
.row {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: auto;
grid-auto-flow: dense;
}
.imageGallery1 {
text-align: center;
position: relative;
& img {
width: 100%;
max-height: 510px;
height: 251px;
}
}
.vertical {
grid-row: span 2;
& img {
height: 510px;
}
}
and now each vertical photo has its own class with grid-row: span 2;
Maybe i could help someone