Ionic Grid Issue

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

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 :
Help !!

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

1 Like

Thank you, I did not noticed that

images display in two column

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


strong text