Build Responsive App with Ionic Responsive Grid

Up until now, Ionic Framework mostly focused on mobile screens. There were no in built support for targetting larger screens like tablets. But now with it's responsive grid, Ionic wants to move forward and show that it's not only for mobile screens. It even plans to bring Ionic 2 apps support and Github Electron and Windows to develop desktop applications.

The files for this tutorial can be found in the following github repository

In this tutorial we are going to get our hands dirty playing with responsive grid in Ionic 2.

Ionic version used in this tutorial

Your system information:
Cordova CLI: 6.1.1 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
Node Version: v6.9.4

To see details of your ionic installation open your terminal and type ionic info
If you have Ionic Framework Version older than 2.1.0 please update your Ionic CLI.

Let's get started building our first responsive app with Ionic 2

To get started, create a new project using blank template. On your terminal, change your working directory and type
ionic start responsiveApp blank ‑‑v2
This should create a new ionic app based on blank starter template provided by Ionic team. Once the npm library installation finishes. Verify that your app is working by serving it to the browser with the command
ionic serve
This should serve ionic application which you can view by opening http://localhost:8100 (Port number may differ, which should be shown in your terminal).
Upon launching the browser, if everything is done correctly, you should see the following page

Lets add the responsive grid

Open your project in your favourite text editor. Open page 'src/pages/home/home.html' and paste the following code

<ion‑header>
  <ion‑navbar>
    <ion‑title>
      Ionic Blank
    </ion‑title>
  </ion‑navbar>
</ion‑header>

<ion‑content padding>
  <ion‑grid>
    <ion‑row>
      <ion‑col col‑sm‑12 col‑md‑6>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
      <ion‑col col‑sm‑12 col‑md‑6>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
      <ion‑col col‑sm‑6 col‑md‑3>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
      <ion‑col col‑sm‑6 col‑md‑3>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
      <ion‑col col‑sm‑6 col‑md‑3>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
      <ion‑col col‑sm‑6 col‑md‑3>
        <ion‑card>
          <ion‑card‑header>
            Responsive Grid Test
          </ion‑card‑header>

          <ion‑card‑content>
            <p>Et vim suscipit apeirian incorrupte, et eruditi liberavisse qui. Augue iudicabit pri at, an mea quidam fabellas, vis id ocurreret sententiae reprimique. Cu mea illud aeterno, deleniti reprimique neglegentur ei pro. Nec ne ipsum omnium sadipscing, vis habemus assueverit et. Munere complectitur ea usu.</p>
          </ion‑card‑content>
        </ion‑card>
      </ion‑col>
    </ion‑row>
  </ion‑grid>
</ion‑content>

After making the change, go to the browser, if you have not closed the previous view, the view should automatically be refreshed and you should see the following screen. Resize the browser to see the effect of the responsive grid.

Understand what is happening here.

The Ionic responsive grid is similar to bootstrap gird. It's based on twelve columns grid structure.
If you want to change the number of columns in grid, change the value of the following Sass variable from 12 to your number of desired columns:
$grid‑columns: 12;

The new responsive grid is similar to previous grid, with few little tweaks.
To get a single column in small screen and two column in large screen just use col‑sm‑ and col‑md‑ as

<ion‑grid>
    <ion‑row>
        <ion‑col col‑sm‑12 col‑md‑6>
            <p>Testing</p>
        </ion‑col>
        <ion‑col col‑sm‑12 col‑md‑6>
            <p>Testing</p>
        </ion‑col>
    </ion‑row>
</ion‑grid>

The number after col‑sm‑ and col‑md‑ specifies how many columns to occupy in small screen size and medium screen size.

Grid size

By default, the grid will take up 100% width. To set a maximum width based on the screen size add the fixed attribute. The maximum width of the grid for each breakpoint is defined in the $grid max widths Sass variable. For more information, seecustomizing the grid.

Conclusion

With this, now it's going to be even more easier to target large variety of screen sizes of mobile devices. Not only this electron promises to support github Electron and Windows for desktop application development. This could mean, your single app will be able to run on all mobile devices plus cross platform desktop devices too. Rejoice..