Grid

Ionic's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage here is that the devices that Ionic supports, all support flexbox.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.

Use the row classname is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automagically.

Note: The borders and gray background in the demo were added so it's easier to see the structure.