Ionic Grid Issue

Ionic Framework ionic-v3
1

Hello, I want to create a 2 column grid in my ionic app, but it always produces a one column grid. What am I doing wrong ?

This is my html:

<ion-content padding>
<ion-grid>
  <ion-row *ngFor="let card of cards" (click)="cardTapped(card)" >
    <ion-col  col-6 col-sm-6 text-center>
    	<ion-card>
    		<img [src]="card.imageUrl" />
    		<div class="card-title">{{card.title}}</div>
    		<div class="card-subtitle">{{card.subtitle}}</div>
 		</ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

This is my css :


page-list-campagnes {

ion-card {
    position: relative;
    text-align: center;
  }
  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }
  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}

And this is the output :
onecolumngrid
Help !!

2

You added *ngFor on ion-row . Try to add *ngFor on ion-col and check.

1 Like
3

Thank you, I did not noticed that

4

images display in two column



<ion-col *ngFor=“let records of listItem” col-6 style=“padding:0px”>



{{records.categoryname|titlecase}}





strong text