Feedback on Ionic's Responsive Grid—not really usable [v4]

Ionic Framework
1

Hey there, I wanted to give Ionic’s Responsive Grid a try but have to say that I’m just going to use the Bootstrap grid system. I’ll just leave some feedback here or if someone could enlighten me, maybe I’ve been using Ionic’s Grid system wrong.

Why: It feels weird having to repeat myself, just to achive what I could achieve in Bootstrap.

For instance in Bootstrap I write class="col-sm-6 col-md-3 col-lg-2" to have different amount of columns on different viewports. The same in Ionic I’d need to do the following:

<ion-grid>
    <ion-row>
        <ion-col size="6" size-sm>some content</ion-col>
        <ion-col size="3" size-md>some content</ion-col>
        <ion-col size="2" size-lg>some content</ion-col>
    </ion-row>
</ion-grid>

It feels as if the focus is more on visibility than on responsiveness. I think both are important.
I could imagine myself using something like <ion-col size-sm="6" size-md="3" size-lg="2">…</ion-col> but not duplicated code.
Haven’t checked performance-wise, so maybe a pure CSS Grid System is the way to go anyway.

Thanks for reading!

2

Is it really the case? can’t you do something like

<ion-col size-sm="6" size-md="3" size-lg="2">

something like that?

in my app I do something like

<ion-col size="6" size-sm="4" text-center>

src: https://beta.ionicframework.com/docs/layout/grid/#customizing-the-grid

bis später
david

1 Like
3

thanks for pointing me in the right way! looks like I messed up adding size="…". like this it does work.
my rant/feedback is therefore nullified :stuck_out_tongue:

1 Like