Search code examples
htmlcssionic-frameworkcss-gridion-grid

Is it possible to use CSS Grid with Ionic?


I'm testing since severals month angular + ionic, and I used a lot the <ion-grid>. But since I'm doing an application that will be available on desktop AND on mobiles, sometimes I need VERY different layouts, and I find hard to achieve this sometime with the flexbox approach of the ion-grid component.

Is there a way to use instead the CSS Grid(https://css-tricks.com/snippets/css/complete-guide-grid/ ) inside of ionic? It would make some layout much easier.

Is this somehow supported directly by Ionic? Or does this require me to directly make it in CSS? What would be the downside of it not directly supported by Ionic?


Solution

  • In ionic there is nothing that force you to use only ionic elements, the point of using these elements is to make it easier for users for faster work. So instead of using bootstrap to make a grid layout for example :

    <div class="blabla">
        <div class="row">
            <div class="col-6 col-sm-12 ..."></div>
        </div>
    </div>
    

    So ion-grid or ion-row or ion-col are just for faster use for a user, but if it comes for better performance between default elements in ionic and bootstrap, for sure it will be better in ionic elements, but if you can achieve your things without using library of bootstrap and just use css, then it will not differ at all since css is a part of ionic and not you who is adding the css file, so its very normal to use css and html normal elements like div to achieve tour results without ionic elemwnts.