2

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?

J4N
  • 19,480
  • 39
  • 187
  • 340

1 Answers1

1

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.

Mostafa Harb
  • 1,558
  • 1
  • 6
  • 12
  • 1
    Yeah, it's what I was thinking, but I wanted to know if there was something existing with CSS-Grid or if I have to use plain CSS. So no risk of other components not working if they are not in a `ion-grid` component but in a css-grid ? – J4N Apr 15 '20 at 09:09
  • 2
    No every thing will keep the same , no risk at all, and for me 13 apps made through 2 years and o rarely use ionic grid and use my own css to achieve whay i want with pure css and no risk in effect at all. – Mostafa Harb Apr 15 '20 at 09:11