How it works...

In the Ionic grid, there are three types of components. The first is ion-grid, the second is ion-row, and the third is ion-col. ion-grid acts as a container for ion-row and ion-col. It takes the full width of the parent. ion-row is for creating rows in the grid. It takes the full width of ion-grid. ion-col is used to create a column inside ion-row. As I said in the chapter earlier, it is a 12-column grid. So, you can have a maximum of twelve columns in a row, without having a line break.

Now, let's understand how we structured our example.

Our home.html page is a kind of profile page for a dummy social network site. We have an avatar of the user, their location, name, various contact icons, and then the social feed.

This is ...

Get Ionic Cookbook - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.