Maximize number of columns (24 columns) in ion-grid (customize ion-grid columns)

Question

can you help me out how is it possible to have an ion-grid with 24 columns? On the ionic page ( https://ionicframework.com/docs/layout/grid ) I could find the property "--ion-grid-columns" which is found under the heading "Number of columns". However, there is no example how to use it. And also the web page says that it is possible to customize the grid with your preferred number of columns.

Do you use the property this way?

in html

 <ion-grid class="myGrid">
     <ion-row>
      <ion-col>Example</ion-col>
    (24 times ...)
      </ion-row>
    </ion-grid>

in css.file

.myGrid{
--ion-grid-columns: 24;
}

However, with this approach. This does not have any effect on my grid. How can you define 24 columns in the ion-grid? Thank you very much.

Answer 1

Place a size="1" in your ion-col and it will work:

<ion-grid>
  <ion-row>
    <ion-col size="1">
      your content
    </ion-col>
  </ion-row>
</ion-grid>

Answer 2

you can add ngFor on ion-col html tag (for example: ngFor="let item of items") and you must define "items" variable in ts file (for example: items = new Array(24);)

• this is for angular framework (also you can do this on similar way for react or vue)

Answer 3

Make sure you specify a size on ion-col .

CSS file:

ion-grid {
    --ion-grid-columns: 24;
}

HTML file:

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let column of [].constructor( 24 ); index as i" size="1">
      {{ i }}
    </ion-col>
  </ion-row>
</ion-grid>

Stackblitz example:

https://stackblitz.com/edit/ionic-angular-v5-aa5fc5?file=src/app/components/test/test.component.html