How to change sass variable dynamically


I have a grid and want to change the $grid-columns which is by default 12 dynamically.
Even this, which is not dynamically didn’t work

page-home {
.grid-columns: 3;   

Please help!

I cannot think of a single reason why you would need or even want to change the number of columns in the grid. 12 is a great number.

I have tiles on my home page and each row should have max. 4 tiles.
To reach this I introduce col-3.
When I don’t add col-3 the tiles are not displayed among themselves, for example when I have 7 tiles to display.

It looks like so:

Thats why I use col-3

 <ion-row *ngFor="let row of tiles">
      <ion-col col-3 *ngFor="let tile of row">
        <mytile #f (click)="f.goTo(tile.toPage)"></mytile>

Is it the wrong way?

That sounds like a good solution to me, and obviates the need for changing anything in the grid.