How to display an nth-column layout using ionic 2 GridLayout

Ionic’s grid system is based on flexbox, a CSS feature supported by all devices that Ionic supports. The grid is composed of three units — grid, rows and columns. Columns will expand to fill their row, and will resize to fit additional columns.
To have a two rows and three equal columns grid, the structure will look like this:



As you can see we have two rows and three columns in the above layout which is pretty easy. This is very easy to layout when you have static data you want to display.

Just recently I was building an app that requires using ionic 2 grid layout, but it was so challenging laying out the structure because my data was coming from call to external API. As you might have know I was also using ngFor.

I tried something like this:


This did not work for me.

The Solution

After a lot trials, I finally solve the issue by doing these:

 ionViewDidLoad() {
      .subscribe(categories => {
        this.categories = categories
        this.rows = Array.from(Array(Math.ceil(categories.length / 3)).keys());
      error => console.log(error));

Take a look at line 5 of the code above, I have a variable call rows where I stored the number of rows that the returned data will have. I user Array.from and also divide the length of my categories by three (number of columns).

I then have this as my html markup:


I found this approach very flexible because if I want a four columns grid I can just replace 3 with 4 in both my markup and in my typescript code.

The complete code can be found here.

Do you know a better approach of doing this? If so please share.

Happy coding.


  1. After cooling it for a enough time, the mould halves are separated and the molded half is ejected. Toggle clamps are suitable for injection molding machines pet grooming supplies with low tonnage necessities. It is supplied with an actuator that strikes the crosshead forward, thus extending the crosshead links that have the movable platen connected to its finish. A cosmetic defect brought on by moisture within the resin or injection molding machine screw rotation or the motion of material via a curved space. Injection Molding is a very common manufacturing method used to provide an everyday basis} home items. The functions cover business, industrial, and shopper products alike.