Ionic 2 makes it super easy to create beautiful looking layouts. Most of the time you can just drop in the component you want to use and be on your way.
Sometimes, you will need to create more complicated layouts, though. Perhaps rather than a simple list, you want a list with three horizontal boxes at the top that show the user their heart rate, current pace, and distance travelled.
This is where the Grid component comes into play. Ionic 2 has a column and row based grid system built into the framework that you can use to create more complex layouts. In this video tutorial, I walk through the basics of how to use the Grid component in Ionic 2.
Here’s the video:
- The structure of a grid in Ionic 2 is as follows:
<ion-grid> <ion-row> <ion-col></ion-col> <ion-col></ion-col> </ion-row> <ion-row> <ion-col></ion-col> <ion-col></ion-col> <ion-col></ion-col> <ion-col></ion-col> </ion-row> </ion-grid>
You can nest rows and columns to create more complex layouts
offset-Xattributes can be added to
<ion-col>to control their width and positioning, where X is a percentage of the width.
wrapattribute can be used with
<ion-row>to force columns that do not fit horizontally to flow down the page vertically
responsive-lgattributes can be used to change the direction of the columns once a certain width breakpoint is hit