ionic grid vertical scrolling with only one row

Question

I am building a responsive grid with N number of columns all in a single row. The reason for them to be in single row is that, number of columns per row depends on screen width (similar to the bootstrap responsive grid). I have list of images that I am getting from the server and displaying them in each column inside grid. here's code for that

 <ion-grid>
    <ion-row *ngIf="data && data.length > 0">
       <ion-col size="6" size-md="4" size-lg="3" class="grid-box"  *ngFor="let d of data">
        <div class="dummy-square"></div> 
        <img [src]="d" >
     </ion-col>
    </ion-row>
 </ion-grid>

now the problem is, because its only one row,

if I have only couple of items then items are centerd vertically instead of top like this

what I need is this

and if I have more items than what can I fit in screen, then whole row is centered vertically and therefore top few ites are off the screen, instead of docking at top, like this

but what i want is this

My feeling is that this is all because of single row but I could be wrong. Could anybody please suggest any solution.

Thanks

Which ionic version are you using? You should not use src attribute with ion-col because it doesn't exist: use ion-img instead to render images or if you're trying to hyper link other content use angular's routerLink — haron68
I am using Ionic 5, sorry that was my mistake in code, have fixed it. I am just displaying image inside ion-col not link. — Bhavesh

Bhavesh Bhavesh · Accepted Answer · 2020-04-16T10:00:54

finally found the issue, my ion-grid was wrapped inside a container and had following style applied

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

Remove these and it's fixed

ionic grid vertical scrolling with only one row

1 Answers