CODEWITHSUNDEEP
cssangularionic-framework
Js doee
Js doee

Reputation: 333

How can i display my images in grid ionic

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

Upvotes: 1

Views: 3421

Answers (2)

sultanmyrza
sultanmyrza

Reputation: 5474

Demo

tried for ionic 5 angular with *ngFor

<ion-grid>
    <ion-row>
      <ion-col 
        sizeXs="12" sizeSm="6" size="4" sizeMd="4" sizeLg="3" sizeXl="2" 
        *ngFor="let image of images">
        <div>Your Image Element goes here </div>
      </ion-col>
    </ion-row>
  </ion-grid>

Upvotes: 2

Emad Abdou
Emad Abdou

Reputation: 287

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

Upvotes: 2

Related Questions