Tiles are not displayed correctly


I have a custom size of tiles on my homepage.
Eeach line/row can have max. 4 tiles.
So what I do is

    <ion-row *ngFor="let row of tiles">
      <ion-col *ngFor="let tile of row">
        <tile #f (click)="f.go(tile.gotoTile)" ></tile>

When I have 7 tiles, the following page is displayed:

What I want is that all the tiles from second row is immediately below the tile above, should look like so.

Maybe try to use some Ionic theming utilities to align content on the left

If nothing work, play with flex css maybe

Hope that will give you some ideas

I recommend taking a deeper look into ionic grid documentation.

There you’ll find everything you need and you don’t need to use any custom styles or classes to do this.

1 Like

ok, how can I change the sass variable $grid-columns dynamically, because the default value is 12?