Wie eine reaktions ionische Gitter in ionischen 2

Question

habe ich eine Liste von Karten haben, die ich brauche sie in 1 Spalte in kleinen Geräten und 2 Spalten in Medienvorrichtung und 3 Spalten in großen Geräten zeigen

basierend auf https://stackoverflow.com/a/36432126/2279488 und https://stackoverflow.com/a/36432126/2279488 Ich habe versucht, unter Codes, aber keinen Erfolg am Ende.

1.

<ion-row responsive-sm> 
    <ion-col *ngFor="let card of cards" width-50> 
     <ion-card > 

auf kleine Gerät zeigt es richtig, auf großen und mittleren zeigt es 2 Karten nur

2.

<ion-row responsive-sm> 
    <ion-col width-50> 
     <ion-card *ngFor="let card of cards"> 

auf kleinen Gerät, um es richtig zeigt, auf große und mittlere 1 Spalte wird angezeigt und alle Karten sind in der Spalte

3.

<ion-row responsive-sm> 
    <ion-col> 
     <ion-card *ngFor="let card of cards"> 

auf kleine Gerät zeigt es richtig, auf mittlere und große es nur 1 Spalte und Karten werden in dieser Spalte

Answer 1

ich die Lösung gefunden, gleiche Problem bei anderen Menschen mit

gezeigt Ich habe meinen ersten Code umbrochen und es funktioniert.

<ion-row responsive-sm wrap> 
    <ion-col *ngFor="let card of cards" width-50> 
     <ion-card > 

Answer 2

Ich habe in meinem HTML-Code unterhalb hinzugefügt und es funktioniert für mich.

<ion-row class="categoryView"> 
     <ion-col class="gridCol" width-40></ion-col> 
     <ion-col class="gridCol" width-40></ion-col> 
     </ion-row> 

ion-col.gridCol.col { 
     height: 80px; 
     background: azure; 
     margin: 10px; 
    } 

    ion-row.categoryView.row { 
     height: 100px; 
     background: black; 
    }