In this Ionic 4 tutorial, we have to show you how to use Ionic Responsive Grid along with a few Angular 8 examples that might be useful for your Ionic Framework app. Sometimes, we want to create Hybrid mobile apps that have a responsive view to match the device screen size and orientation (portrait/landscape). Fortunately, Ionic 4 has built-in Responsive Grid component to achieve the responsive app layout.
Table of Contents:
The Ionic Grid is a flexbox system that matches the mobile device screen with a custom layout. Its build by 3 elements of a grid, rows, and cols. The rows are the child of the Grid and the cols are the child of the rows. Column expansion will fill the row and resize depends on the sibling's column. Column width based on 12 column layout, its similar to the Bootstrap grid column system. The grid can customizable using CSS.
The following tools, frameworks, and modules are required for this tutorial:
- Ionic 4 Framework
- Angular 8
- Terminal or Command Line
- Text Editor
Preparation
This Ionic responsive grid example will implement in an Ionic app. So, the first time to do is create an Ionic 4 app. Before starting to create an Ionic 4 app, we have to make sure that Node.js latest and recommended version is installed. To check the version of Node.js and NPM type this command in the Terminal or Command line.
node -v
v10.15.1
npm -v
6.11.3Next, we have to install or update the Ionic to the latest version by type this command.
sudo npm install -g ionicYou will get the latest Ionic CLI version 5 in your terminal or command line. Check the version by type this command.
ionic -v
5.4.5Right now, we are using the latest Ionic CLI version 5.2.8. Don't worry about the Angular version, we will use any version that generated with Ionic apps. Next, we will create an Ionic 4 app by typing this command.
ionic start ionic-grid tabs --type=angularNext, we have to check if the Ionic 4 app is working by running this app as lab mode.
cd ./ionic-grid
ionic serve -lIf there's a question to install @ionic/lab just type "Y" to install it immediately. Here's the Ionic 4 app that looks like.
Basic Ionic Grid
We will implement a basic grid in one of the generated Ionic tabs. For that, open and edit `src/app/tab1/tab1.page.html` then add/replace the <ion-content> contents with these lines of HTML tags with Ionic grid, row, and col.
<ion-grid>
<ion-row>
<ion-col>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>That example of ion-grid, ion-row, and ion-col is Ionic Grid auto-layout which the col width distributes automatically to fit the screen width and the rest the cols put in the line.
Below is an example of using Ionic Grid with the attribute "ion-no-padding".
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col class="ion-no-padding">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col class="ion-no-padding">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col class="ion-no-padding">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col class="ion-no-padding">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col class="ion-no-padding">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>We put ion-no-padding class in <ion-grid> and <ion-col> to remove padding in Ionic grid and cols. Next, we will show you an example of an Ionic grid with a specific col width. In this example, you will see multiple size base on minimum screen width. Comment the previous example then add these HTML tags.
<ion-grid>
<ion-row>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
This example is to push the col to right based on screen size.
<ion-grid>
<ion-row>
<ion-col push-lg="6" push-md="4" push-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col push-lg="6" push-md="4" push-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col push-lg="6" push-md="4" push-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col push-lg="6" push-md="4" push-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
This example pulls the col to left based on screen size.
<ion-grid>
<ion-row>
<ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col pull-lg="6" pull-md="4" pull-sm="2" size="12">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
This example is col offset.
<ion-grid>
<ion-row>
<ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
<ion-col size="12" size-lg="4" size-md="4" size-sm="4" offset-lg="4" offset-md="4" offset-sm="4">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</ion-col>
</ion-row>
</ion-grid>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
Responsive Form
This example of the responsive form is one of the most used in the mobile apps that required the long-form. The long-form in the smaller screen width will be a single column and scrollable to the bottom to the end of the form. In the wider screen width, it will become two-column or more of the form. We will use the second tab for this, open and edit `src/app/tab2/tab2.page.html` then replace or add the <ion-content> contents to these HTML tags.
<form>
<ion-grid>
<ion-row>
<ion-col size-lg="6" size-md="6" size-sm="6" size="12">
<ion-item>
<ion-label position="floating">Username/Email</ion-label>
<ion-input type="email"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="6" size-md="6" size-sm="6" size="12">
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="6" size="12">
<ion-item>
<ion-label position="floating">First Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="6" size="12">
<ion-item>
<ion-label position="floating">Middle Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="6" size="12">
<ion-item>
<ion-label position="floating">Last Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="6" size-md="6" size-sm="12" size="12">
<ion-item>
<ion-label position="floating">Address Line 1</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
</ion-col>
<ion-col size-lg="6" size-md="6" size-sm="12" size="12">
<ion-item>
<ion-label position="floating">Address Line 2</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">City</ion-label>
<ion-select value="newyork" okText="Okay" cancelText="Dismiss">
<ion-select-option value="newyork">New York</ion-select-option>
<ion-select-option value="tokyo">Tokyo</ion-select-option>
<ion-select-option value="london">London</ion-select-option>
<ion-select-option value="newdelhi">New Delhi</ion-select-option>
<ion-select-option value="jakarta">Jakarta</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Country</ion-label>
<ion-select value="usa" okText="Okay" cancelText="Dismiss">
<ion-select-option value="usa">United States</ion-select-option>
<ion-select-option value="japan">Japan</ion-select-option>
<ion-select-option value="uk">United Kingdom</ion-select-option>
<ion-select-option value="india">India</ion-select-option>
<ion-select-option value="indonesia">Indonesia</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Post Code</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="3" size-md="3" size-sm="3" size="12">
<ion-item>
<ion-label position="floating">Gender</ion-label>
<ion-select value="male" okText="Okay" cancelText="Dismiss">
<ion-select-option value="male">Male</ion-select-option>
<ion-select-option value="female">female</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size-lg="3" size-md="3" size-sm="3" size="12">
<ion-item>
<ion-label position="floating">Age</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="3" size-md="3" size-sm="3" size="12">
<ion-item>
<ion-label position="floating">Height</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="3" size-md="3" size-sm="3" size="12">
<ion-item>
<ion-label position="floating">Weight</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Occupation</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Position</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Company</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Basic Salary</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Meal</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="4" size-md="4" size-sm="4" size="12">
<ion-item>
<ion-label position="floating">Transport</ion-label>
<ion-input type="number"></ion-input>
</ion-item>
</ion-col>
<ion-col size-lg="12" size-md="12" size-sm="12" size="12">
<ion-item>
<ion-label position="floating">Notes</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</form>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
Responsive Grid List
In this example, we will show you the responsive grid list of the articles. The grid <ion-col> will be a single column for the smaller screen width. For a larger screen, they will be two or more <ion-col> per lines. To implement this, we need to add an array of objects in `src/app/tab3/tab3.page.ts`. Add this line of the array before the constructor.
articles: any[] = [
{ title: 'Grails 4 Tutorial: Spring Security Core Login Example', image: './assets/imgs/article1.png' },
{ title: 'Angular Material Form Controls, Form Field and Input Examples', image: './assets/imgs/article2.png' },
{ title: 'Angular 8 Tutorial: Observable and RXJS Examples', image: './assets/imgs/article3.png' },
{ title: 'React Native Tutorial: Facebook Login Example', image: './assets/imgs/article4.png' },
{ title: 'Spring Boot Tutorial: Build an MVC Java Web App using Netbeans', image: './assets/imgs/article5.png' },
{ title: 'Ionic 4 Tutorial: Facebook Login Example', image: './assets/imgs/article6.png' },
{ title: 'View Google Maps in HTML Page', image: './assets/imgs/article7.png' },
{ title: 'Angular 8 Tutorial: REST API and HttpClient Examples', image: './assets/imgs/article8.png' },
{ title: 'MEAN Stack (Angular 8) Tutorial: Build a Simple Blog CMS', image: './assets/imgs/article9.png' },
{ title: 'MongoDB Tutorial: Aggregate Method Example', image: './assets/imgs/article10.png' },
{ title: 'Ionic 4 Tutorial: Angular 8 Multilevel Accordion Menu Example', image: './assets/imgs/article11.png' },
{ title: 'React Native Firebase Cloud Messaging (FCM) Push Notification', image: './assets/imgs/article12.png' }
];Next, open and edit `src/app/tab3/tab3.page.html` then replace or add the <ion-content> contents with these HTML tags.
<ion-grid>
<ion-row>
<ion-col size-lg="3" size-md="4" size-sm="6" size="12" *ngFor="let article of articles; let i=index;">
<ion-card>
<img src="{{article.image}}" alt="{{article.title}}"/>
<ion-card-header>
<ion-card-subtitle>{{article.title}}</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>Here's the result in iPhone 6/6s portrait.
iPhone 6/6s landscape.
iPhone X landscape.
iPad landscape.
That it's, a little example of Ionic Grid with type Angular. You can check the full source codes in our GitHub.
We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.
That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:
- IONIC 4 Design Hybrid Mobile Applications IOS & Android
- Wordpress Rest API and Ionic 4 (Angular) App With Auth
- Mobile App from Development to Deployment - IONIC 4
- Ionic 4 Crash Course with Heartstone API & Angular
- Ionic 4 Mega Course: Build 10 Real World Apps
Thanks!