Responsive grid doesn't work with xs breakpoint (solved)


#1

Hi,
I can’t understand how Ionic Responsive Grid works.
I’ve this grid, with these breakpoints: xs, sm,md,lg,xl.
If I try it with Chrome it works as expexted until the size of the page is 576px when all the columns are in the same row.

The problem is that as soon as the size of the page reaches 575px all the cards go again on the same row, as it was a large screen.
How is it possibile?

<ion-grid>
    <ion-row>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
            ONE
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          TWO
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          THREE
        </ion-card>
      </ion-col>
      <ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
        <ion-card>
          FOUR
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Responsive Grid Breakpoints
#2

I think I’ve solved.
The documentation says: “_Note: the first breakpoint must have the value set to 0 and all breakpoint values must be in ascending order.”

So I’ve changed from:
<ion-col col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12>
to
<ion-col col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3>

And now it seems to work.

cld