Ionic grid system

Today lets play with Ionic grid system – it’s built with CSS Flexible Box Layout Module standard, hence it supports all the devices which ionic supports.

Topics Covered
1. Basics of row, column
2. even spacing of column
3. explicit column sizing
4. column offset
5. column positioning
6. row positioning – Going vertical
7. responsive grid

Getting started
To get started from scratch, please visit Getting Started With IONIC APP. Get your IONIC app template ready and continue with this video tutorial.

Software Versions used for the demo
1. Node: v4.2.6
2. Cordova: 6.0.0
3. Ionic: 1.7.14
4. android: Android 6.0 (API level 23)
5. OS: Demo showed on Windows 10 Operating System.

I’ve installed ionic tabs template and am editing tab-dash.html file inside www/templates folder.

Basics of row and column

    
       
.col
       
.col
  
    

rows are specified with class row and columns with class name col

Even spacing of columns

    
       
.col
       
.col
  
       
.col
  
       
.col
  
       
.col
  
    

In above example all columns take up 20% of space depending on the screen width of the device. i.e., 100/5 = 20. There are 5 columns.

Explicit column spacing

    
       
.col-50
       
.col
  
       
.col
  
    

Here the first column takes 50% of the width and the other 2 columns share the width equally i.e., 25% each.

Column offset

    
       
.col-25
       
.col-25
  
       
.col-25
  
    

Above code leaves 25% offset at the beginning, then a column of width 25% followed by 2 more columns of 25% width.

Column positioning

    
       
.col-top
       
.col-center
  
       
.col-bottom
  
       

        1 
2 
3 
4
       
    

The first column aligns itself to the top, the second one to the center and the last one to the bottom.

Row positioning – Going vertical

    
       
.col
       
.col
  
       
.col
  
       

        1 
2 
3 
4
       
    

row-center class makes the row align itself to the center, row-top makes it align itself to the top and row-bottom makes row to align itself to the bottom.

responsive grid

    
       
.col
       
.col
  
       
.col
  
    

You can see its effect only on real devices. You must test it with real devices having different screen size.

responsive-sm for devices smaller than landscape.
responsive-md for devices smaller portrait tablet.
responsive-lg for devices smaller than landscape tablet.

UI
Using this simple ionic grid system we can make our applications User Interface to suit our applications needs.

Further ..
For further configuration, each class uses a Sass variable that can be changed to your liking. There’s also a responsive-grid-break mixin you can use to create your own grid classes.