How can i display my images in grid ionic

Issue

i want to be able to show my images in grid form, two pics per row, but its not working, here is my code

The image.page.html

<div id="gridview">     
    <div *ngFor="let video of myData.video" class="image">              
        <img (click)="service.VideoModal(video.vid_path)" [src]="service.ApiURL+video.thumbs_path">
    </div>
</div>

The image.page.scss

#gridview {
    text-align:center; 
}
div.image {
    margin: 10px;
    display: inline-block;
} 
div.image img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}
div.image img:hover {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.32), 0 0 0 0px rgba(0,0,0,0.16);
}

it just displays all the pictures in the center one image per row, how can i make it to display 2 images per row

Solution

You can use Ionic Grid it's like

<ion-grid>
  <ion-row>
    <ion-col size="6">
      // Your Image
    </ion-col>
    <ion-col size="6">
      // Your Image
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="6">
      // Your Image
    </ion-col>
    <ion-col size="6">
      // Your Image
    </ion-col>
  </ion-row>
</ion-grid>

and you'll be able to display 2 photos each row, for more info, check ionic documentation https://ionicframework.com/docs/api/grid

Answered By - Emad Abdou