Ionic 3 Grid System Tutorial

Ionic 3 Grid System Tutorial

In this post we will give you information about Ionic 3 Grid System Tutorial. Hear we will give you detail about Ionic 3 Grid System TutorialAnd how to use it also give you demo for it if it is necessary.

On the previous tutorial, we have seen how to use Ionic 2 Split pane and used it to create a desktop app with Electron and Ionic 2. On this tutorial we are going to see how to use the grid system which can be used on small mobile screens and on larger desktop and tablets screens where can be much useful.

Understanding Ionic 3 Grid System

The grid layout system in Ionic 3 allows you to build complex user interfaces via rows and columns just like popular CSS frameworks such as Bootstrap and Foundation.

In most cases when you are building mobile apps with Ionic 3,you just need to place user interface components and wrapping them inside Ionic 3 lists which can produce good results but on larger screens such as tablets or Desktop (If you are using Ionic 3 for Desktop apps UIs) you may need to use advancedlayout systems such as the Grid layout system.

The grid layout uses rows (ion-row) and columns(ion-col) to break up the available space.

To create a row you need to use the ion-row directive. For a column use ion-col directive.

For example:


The Ionic 3 grid system uses 12 columns so to specify the size of any column you just set a number from 1 to 12 with the col attribute (col-width). For example:

<ion-grid><ion-row><ion-colcol-1>This column will take 1/12 of available horizontal area (1 column of 12)</ion-col></ion-row><ion-row><ion-colcol-12>This column will take the whole row (12 columns)</ion-col></ion-row></ion-grid>

Just like Bootstrap you can provide different sizes for different breakpoints.

To create columns with different sizes depending on the size of screens you can simply use this syntax:

  • width can be any value from 1 to 12.

  • breakpoint can be either xl(extra small), sm(small), md(medium) or lg(large).

For example let’s create a grid with one row which has two column.

For large/medium Desktop screens or tablets, the two columns will divide the row space between them.

For small mobile screens, each column will take the whole row space.


Here is a screenshot of Electron app built using Ionic 2 split pane and grid system components


Using the grid system, you can build complex user interfaces for Ionic 3 apps. Both the grid system and split pane component seen on the previous tutorial can be more useful when using Ionic 3 for apps on larger screens such as tablets and desktops.

You can see the code accompanying this tutorial on GitHub

Hope this code and post will helped you for implement Ionic 3 Grid System Tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US