Images showing issue - html

Question

I have total 20 images of products. I want to show these images like 1st product should be on left side and related images of that product on right hand side. Remaining products should come under 1st product column wise on the left hand side.
Currently, I am trying to do so but it is now coming properly. I am not good with CSS though. Could someone tell me what I am doing wrong?
Below is my code.
HTML
for all products images
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class="grid" *ngIf="resultData">
<div class="item photo" *ngIf="anums[0]">
<img class="photothumb" [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[1]">
<img class="photothumb" [src]="resultData[1]" (click)="openImageDialogbox(resultData[1])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_02]">Zum Produkt {{ anums[1] }}</p>
</div>
</div>
<div class="item photo" *ngIf="anums[2]">
<img class="photothumb" [src]="resultData[2]" (click)="openImageDialogbox(resultData[2])" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_03]">Zum Produkt {{ anums[2] }}</p>
</div>
</div>
</div>
</mat-card>
For image of first product (like logo, supporting images etc)
<div class="grid">
<div class="item photo" *ngIf="secondImage">
<img class="photothumb" [src]="secondImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 2
</div>
<div class="item photo" *ngIf="thirdImage">
<img class="photothumb" [src]="thirdImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 3</p>
</div>
</div>
<div class="item photo" *ngIf="fourthImage">
<img class="photothumb" [src]="fourthImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Bild 4</p>
</div>
</div>
<div class="item photo" *ngIf="logo">
<img class="photothumb" [src]="logo" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Logo</p>
</div>
</div>
<div class="item photo" *ngIf="brandImage">
<img class="photothumb" [src]="brandImage" onError="this.src='/assets/kein-bild.gif';">
<div class="desc">
<p>Siegel</p>
</div>
</div>
</div>
</div>
CSS
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 150px;
/* flex-direction: row wrap; */
}
.item {
background-color: #ffffff;
margin: 10px;
width: 300px;
}
.photothumb {
max-width: 200px;
max-height: 200px;
cursor: pointer;
}
.desc {
padding: 10px 10px 5px 10px;
cursor: pointer;
}
.desc img {
width: 50%;
margin: 0 10px 10px 0;
float: left;
}
.desc p {
margin-bottom: 10px;
font-family: 'Arial';
font-size: 15px;
}
.photo {
grid-row-end: span 2;
}
Solution which I did :
<mat-card class="example-card" fxFlex="60%;" fxFlex.xs="80%">
<div class='some-page-wrapper'>
<div class='row'>
<div class='column'>
<div class='blue-column' *ngIf="anums[0]">
<img [src]="resultData[0]" (click)="openImageDialogbox(resultData[0])" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p [routerLink]="['/rullko/produkt/', werbedata.FILIALE + werbedata.ArtNr_01]">Zum Produkt {{ anums[0] }}</p>
</div>
</div>
</div>
<div class='green-column' *ngIf="secondImage">
<img [src]="secondImage" (click)="openImageDialogbox(secondImage)" onError="this.src='/assets/noImage.png';">
<div class="desc">
<p>Bild 2</p>
</div>
</div>
</div>
</div>
</mat-card>
CSS:
.some-page-wrapper {
margin: 15px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}