ionic Angular 및 ngfor에서 반응형 그리드를 만드는 방법은 무엇입니까?

Question

ionic Angular 및 ngfor에서 반응형 그리드를 만드는 방법은 무엇입니까? 여기처럼 여기에 이미지 설명을 입력하세요

내 그리드 템플릿:

으아악

이 그리드를 제안하려고 하는데 ngFor 루프에 표시하는 방법을 모르겠습니다.

<ion-grid>
  <ion-row>
    <ion-col>
        <ion-item *ngFor="let prod of displayedList" class="item-entry" detail routerLink="/tabs/tab1/prod-detail/{{ prod.id }}">
          <ion-thumbnail>
            <ion-img [src]="prod.images[0].src" alt="{{ prod.name }}"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h3 class="item-name">{{ prod.name }}</h3>
            <ion-text>
              <p class="price">{{ prod.price | currency:"GBP" }}</p>
            </ion-text>
          </ion-label>
        </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

ion-col에 크기를 추가하고 ion-col 자체에 *ngFor를 넣을 수 있습니다. 예를 들면 다음과 같습니다:

으아악

보시다시피 1행에 3열이 들어가도록 크기 4를 사용했습니다(최대 12열이므로 12/4 = 3). 그것이 당신에게 도움이되기를 바랍니다!