When we’re talking about modern web design, it would be nothing without responsive grid systems. These systems are used for creating page layouts through a series of rows and columns that enclose your content. They are usually not that needed in mobile development but sometimes you will need a more granular control over your application.
 
Ionic’s grid system is somewhat different from the rest of competition. This system follows the CSS Flexible Box Layout Module standard that is poised to redefine how we do layouts in CSS. One downside of this system is a different implementation on different browsers. Thankfully Ionic Framework is made for devices that all share the same implementation.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...

Intro

 
Ionic’s grid system is composed of divs with the class row, including nested divs having the class col:
 
<div class="row">
  <div class="col">
    <button class="button button-block button-positive">Button</button>
  </div>
  <div class="col">
    <button class="button button-block">Button</button>
  </div>
</div>
 
Columns can vary in size or have differing offsets:
 
<div class="row">
  <div class="col-50">
    <button class="button button-block button-positive">Large Button</button>
  </div>
  <div class="col-25 col-offset-25">
    <button class="button button-block">Small Button</button>
  </div>
</div>
 
A large selection of percentage-based options is available:
 
  • ExplicitOffsetsPercentages
  • .col-10.col-offset-1010%
  • .col-20.col-offset-2020%
  • .col-25.col-offset-2525%
  • .col-33.col-offset-3333.3333%
  • .col-50.col-offset-5050%
  • .col-67.col-offset-6766.6666%
  • .col-75.col-offset-7575%
  • .col-80.col-offset-8080%
  • .col-90.col-offset-9090%
 
This grid system also supports vertical grids:
 
<div class="row">
  <div class="col"><img src="http://2.imimg.com/data2/BE/OO/IMFCP-5699312/css-images-orchestra-250x250.jpg"></div>
  <div class="col">Caption Top</div>
</div>
<div class="row row-center">
  <div class="col"><img src="http://2.imimg.com/data2/BE/OO/IMFCP-5699312/css-images-orchestra-250x250.jpg"></div>
  <div class="col">Caption Middle</div>
</div>
<div class="row row-bottom">
  <div class="col"><img src="http://2.imimg.com/data2/BE/OO/IMFCP-5699312/css-images-orchestra-250x250.jpg"></div>
  <div class="col">Caption Middle</div>
</div>
 
And finally there’s a responsive grid where each column can turn into a row at certain breakpoints:
 
div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>
 
Available classes: Breaking Classes:
 
  • Responsive ClassBreak when roughly
  • .responsive-smSmaller than landscape phone
  • .responsive-mdSmaller than portrait tablet
  • .responsive-lgSmaller than landscape tablet
 

Example

 
Demo
 

Embedded working example

 
Ionic Framework Grid System Example
 

HTML:

<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="style.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="http://example.gajotres.net/include/ngStorage/ngStorage.min.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <ion-nav-bar class="bar-royal"></ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Ionic Framework Grid System Example">  
    
      <ion-content class="padding">

        <div class="row">
          <div class="col-20">
            
          </div>
          <div class="col-20 center">
            <h2>Player 1</h2>
          </div>
          <div class="col-20">
            
          </div>
          <div class="col-20 center">
            <h2>Player 2</h2>
          </div>          
        </div>
        <div class="row">
          <div class="col-33">
            <img ng-src="http://www.clker.com/cliparts/W/E/4/8/m/J/back-x.svg" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/012/613/original/25CF-500x500.png?1275331433" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/012/613/original/25CF-500x500.png?1275331433" width="100%"/>
          </div>          
        </div>
        <div class="row">
          <div class="col-33">
            <img ng-src="http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/012/613/original/25CF-500x500.png?1275331433" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://www.clker.com/cliparts/W/E/4/8/m/J/back-x.svg" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://www.clker.com/cliparts/W/E/4/8/m/J/back-x.svg" width="100%"/>
          </div>          
        </div>
        <div class="row">
          <div class="col-33">
            <img ng-src="http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/012/613/original/25CF-500x500.png?1275331433" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/012/613/original/25CF-500x500.png?1275331433" width="100%"/>
          </div>
          <div class="col-33">
            <img ng-src="http://www.clker.com/cliparts/W/E/4/8/m/J/back-x.svg" width="100%"/>
          </div>          
        </div>        
        <div class="row">
          <div class="col-33 col-offset-67">
              <button class="button button-block button-positive">Reset Game</button>
          </div>          
        </div>      
   
      </ion-content>
      
    </ion-view>
  </script>   

</body>
 
</html>

JavaScript:

var nameApp = angular.module('starter', ['ionic','ngStorage']);

nameApp.config(function($stateProvider, $urlRouterProvider) {
 
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });
  $urlRouterProvider.otherwise("/");
 
});


nameApp.controller('HomeCtrl', function($scope, $localStorage) {

  
});

CSS:

.center {
  text-align: center;
}
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs: