图片显示问题

Question

我总共有20张产品图片。我想显示这些图像，例如第一个产品应在左侧，而该产品的相关图像应在右侧。其余产品应位于左侧第一产品列的明智位置。

当前，我正在尝试这样做，但是现在可以正常进行了。我对CSS不太满意。有人可以告诉我我在做什么错吗？

下面是我的代码。

HTML

对于所有产品图片

  <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>

对于第一个产品的图片（例如徽标，支持图片等）

<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;
}

我所做的解决方案：

  <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;
}