Tiles are not displayed correctly

Ionic Framework ionic-v3
1

Hello,

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

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

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

a
a.PNG1004×385 597 Bytes

What I want is that all the tiles from second row is immediately below the tile above, should look like so.
a
a.PNG955×359 540 Bytes

2

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

3

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
4

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