Responsive Ionic Grid not working as expected when on smaller device

In my Ionic 5 app, I am trying to create a grid that behaves like below:

  • On desktops, I want each column to take up half of the width of the row.
  • On small (mobile) screens, I want each column to take up the full width of the row.

Here is what I currently have, but it’s not working as expected:

<ion-content fullscreen>
  <ion-grid>
    <ion-row>
      <ion-col size="6" size-sm="12">
        <ion-card>
          <ion-img src="assets/images/mypic.jpg"></ion-img>
        </ion-card>
      </ion-col>
      <ion-col size="6" size-sm="12">
        <ion-card>
          <ion-img src="assets/images/mypic.jpg"></ion-img>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Can someone please point out where I’m going wrong & what I need to change?

What dou you mean with “doesn’t work as expected” - how is the behaviour?

Thanks for your response.

I’ve since updated my code to the below:

<ion-grid>
    <ion-row>
      <ion-col size="12" size-xs="12" size-sm="6" size-md="4" size-lg="3" *ngFor="let item of [].constructor(50)">
      </ion-col>
    </ion-row>
  </ion-grid>

Here is the existing behaviour:

  • When this is displayed on my mobile device in portrait (vertical) mode, 1 column is displayed per row.
  • When this is displayed on my mobile device in portrait (horizontal) mode, 3 columns are displayed per row.
  • When I view on my desktop (ionic serve), 1 column is displayed per row.

Here is the behaviour that I want:

  • When this is displayed on a desktop, I want 3 columns to be displayed per row, rather than the 1 column per row which the above code is currently doing.

Hope this helps explain my question more clearly.

The Breakpoints can be found here. As your desktop might have mire than a width of 1200px, you need to set size-xl=“12”?

Thanks for your response.

Do you mean size-xl="3 so that I have 3 columns on the row?

I’ve added this below but it’s still only showing 1 column per row on the desktop:

  <ion-col size="12" size-xs="12" size-sm="6" size-md="4" size-lg="3" size-xl="3" *ngFor="let item of [].constructor(50)">

size is not the number of columns. As far as i know, is 12 = 100% ( 1 Column). So if you want 3 Columns for desktop, you need to set size-xl=4 , but if 3 doesn’t work, 4 wont either. Can you create a small repository where i can reproduce this?

Sure, I’ve sent you a message with the github link. Thanks a lot for your help!