Grid menu not showing items properly

[Blindd]

I’m trying to have a menu that show the items in grid menu

but it’s showing the same items like this:

here is my code:
HTML

<ion-grid>
        <ion-row *ngFor="let item of items" (click)="itemSelected(item)">
            <ion-col col-6>
                <img [src]="item.image" alt="">
                <p>{{item.name}}</p>
            </ion-col>
            
            <ion-col col-6>
                <img [src]="item.image" alt="">
                <h3>{{item.name}}</h3>
            </ion-col>
        </ion-row>
    </ion-grid>

and the other code where i have the items

items = [ { image: "http://ionic.io/img/2.png", name: 'item1', }, { image: "http://ionic.io/img/2.png", name: 'item2', }, { image: "http://ionic.io/img/2.png", name: 'item3', }, { image: "http://ionic.io/img/2.png", name: 'item4', } ];

[Blindd]

i find the solution and it was very simple

i just moved

*ngFor="let item of items" (click)="itemSelected(item)"

from ion-row in ion-col and now it shows like this