Grid layouts for Ionic via ng-repeat


Most folks would argue that massaging an array list is the quickest and easiest way to get a grid layout going with Ionic:

But I would like to hear from the community if there is a way to accomplish this without messing with the data and using things like: ng-repeat-start, ng-repeat-end, $even, $odd, ng-class, ng-show etc. ?? It would be cool if we could handle any array list and break it into grid layout on its own … the pen upstairs uses Rafael Dipold’s filter instead.

Ionic horizontal cards + 3 cards per row

I’ve struggled with this from time to time as well with Angular in general. However, my CSS skills are too lacking to tackle it. I end up massaging the arrays too.


Hi guys,

I play with Flexbox properties and I got something which can be the solution you’re looking for : (check the CSS and modify 50% by the percentage needed).

Hope it will help you.



Sorry for the codepen shared yesterday. It doesn’t work on Safari…There are some CSS3 Flex properties which aren’t supported yet by Safari (if they continue like that, they can become the new Internet Explorer…).


your demo works great, just add -webkit- before the flex css attributes and it works in safari and chrome. Thanks for the demo!