Ionic 4 Responsive Grid Tutorial with Examples

Ionic 4 Responsive Grid Tutorial with Examples

In this Ionic 4 Grid tutorial, we'll learn how to create a simple grid layout, How to develop an Ionic Responsive image gallery, and we also looked at how to create a responsive form using a Grid layout.

A comprehensive Ionic 4 / Angular 8 Responsive Grid tutorial with useful CSS Grid layout examples. In this tutorial, we will learn how to create a layout, and a responsive image gallery from scratch using Ionic 4 Grid system.

Ionic offers a broad set of UI components, and these UI components help create and allow us to swiftly build a responsive layout, which works merely great on any screen size. In this tutorial, we are going to talk about the Ionic 4 Grid system. Ionic 4 Grid system is a flexbox system based on a grid, rows, and cols and easily fits on almost every mobile screen size.

Table of Contents

  1. Ionic 4 Grid Layout
  2. Set Up Ionic App
  3. Creating Simple Basic Grid in Ionic 4 Angular 8
  4. Ionic 4 Image Gallery with Responsive Grid System
  5. Create Responsive Form in Ionic 4
  6. Conclusion

1. Ionic 4 Grid Layout

The ionic Grid system is based on Bootstrap (CSS UI framework) and comes with a 12 column layout and can be customized using CSS.

Ionic Grid Structure

<ion-grid>
    <ion-row>
        <ion-col></ion-col>
        <ion-col></ion-col>
    </ion-row>
</ion-grid>

Let’s see what grid, rows and cols are in the Ionic 4 grid system.

Grid: The grid system in Ionic 4 is initiated with an ion-grid tag, and It creates a wrapper around rows and columns in the grid system. Rows are inserted as vertical structures inside the grid. Then rows get split into the columns to obtain the horizontal space to fill the row area.

Rows: Rows are the direct child of the Ionic Grid and can be formed using the ion-row tag. Rows are created a horizontal structure with various numbers of columns, a maximum of 12 columns can be fitted in the row to occupy the full width.

Columns: To define a column or a cell use the ion-col tag, Columns are declared in the row to acquire the full available space inside the row.

2. Set Up Ionic App

We will integrate responsive grid examples in an Ionic / Angular app. Make sure you must have Ionic CLI installed in your machine if not then run the following command.

sudo npm install -g ionic

Next, run the following command to install the Ionic / Angular project.

ionic start ionic-grid-examples tabs --type=angular

Get inside the project folder.

cd ionic-grid-examples

Run the below command to install the lab mode.

npm i @ionic/lab --save-dev

Next, run the following command to make sure whether your app is working or not.

ionic serve -l

Ionic 4 Angular 8 Responsive Grid

3. Creating Simple Basic Grid in Ionic 4 Angular 8

To work with Grid in Ionic, we have to understand its conventional structure. It offers ion-grid, which creates a flexbox based CSS grid layout. It contains three main elements, which are ion-grid, ion-row, and ion-col.

Let us create a simple basic grid inside the Ionic tab, go to tab1.page.html and replace the following code with ion-content.

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <div>1 of 2</div>
      </ion-col>
      <ion-col>
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 3</div>
      </ion-col>
      <ion-col>
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 3</div>
      </ion-col>
      <ion-col col-6="">
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-6="">
        <div>1 of 3</div>
      </ion-col>
      <ion-col>
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col offset-4="">
        <div>1 of 2</div>
      </ion-col>
      <ion-col>
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 2</div>
      </ion-col>
      <ion-col offset-4="">
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4</div>
      </ion-col>
      <ion-col>
        <div>3 of 4</div>
      </ion-col>
      <ion-col>
        <div>4 of 4</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Ionic 4 Simple Grid

You can see in the example above we placed the Columns horizontally within the row, and it is quickly adjusting as per the available space inside the row.

As i stated above, Ionic Grid system comes with 12 columns similarly like Bootstrap, and in a single row, 12 columns can be adjusted.

Now, we have looked at how Grid is created and works in an Ionic app. Next, we will learn how to create a responsive image gallery using the Ionic 4 Grid system. Building a responsive grid layout for image gallery is so simple: make sure you must have some images kept inside the assets/img folder.

You can take royalty-free pictures from the Pexels.

Go to tab2.page.html page and add the following HTML code inside the ion-content tag to define the image gallery structure.

<ion-grid>
  <ion-row>
    <ion-col sizeLg="4" sizeMd="4" sizeXs="6" *ngFor="let image of [1,2,3,4,5,6,7,8,9]">
      <div class="img-wrapper" [style.background-image]="'url(assets/img/ionic-image-gallery-' + image + '.jpg)'">
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

sizeLg=”4″ – Image gallery will take 3 columns on large devices. sizeMd=”4″ – Image gallery will take 3 columns on medium devices. sizeXs=”6″ – 2 images will take 2 columns in a single row in small devices.

To know more about Ionic Grid layout check out the Ionic’s official documentation here.

Next, open tab2.page.scss file and add the following CSS code.

.img-wrapper {
    min-height: 200px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

In the smaller device it looks something like this.

Ionic 4 Responsive Image Gallery with Grid

In the larger device this gallery will display three columns in a single row.

image gallery

5. Create Responsive Form in Ionic 4

We can use size attribute to build a responsive form in Ionic 4 / Angular 8 application. Open tab3.page.html page and add the following code inside the ion-content tag.

<form>
    <ion-grid>
      <ion-row>
        <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
          <ion-item>
            <ion-label position="floating">Name</ion-label>
            <ion-input type="text"></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">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">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="india">India</ion-select-option>
              <ion-select-option value="france">France</ion-select-option>
              <ion-select-option value="spain">Spain</ion-select-option>
              <ion-select-option value="brazil">Brazil</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="4" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Choose City</ion-label>
            <ion-select value="california" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="california">California</ion-select-option>
              <ion-select-option value="illinois">Illinois</ion-select-option>
              <ion-select-option value="texas">Texas</ion-select-option>
              <ion-select-option value="pennsylvania">Pennsylvania</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Address</ion-label>
            <ion-textarea></ion-textarea>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Postal Code</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">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="4" size-md="4" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Age</ion-label>
            <ion-input type="number"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

We created a simple form in Ionic app which will adjust automatically on various devices. In the small device, every column will occupy full width, and it will be converted into a 2 column layout in the horizontal view.

Ionic 4 Responsive Form with Grid layout

6. Conclusion

We have completed the Ionic 4 Grid tutorial. In this tutorial, we learned how to create a simple grid layout, How to develop an Ionic Responsive image gallery, and we also looked at how to create a responsive form using a Grid layout.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Ionic 5 Tutorial: Create Ionic Calculator App (Angular)

In this Ionic 5 tutorial, we will create an Ionic Calculator app (Angular) that run on Android or iOS device. We will use a dark theme for this Ionic calculator appearance, at least similar to a built-in iOS calculator app. The feature of this calculator app is a basic feature that only has basic calculation operators.

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Run Your Ionic App on Android. Make sure you're using Java 8. Run ionic cordova prepare android. Open platforms/android in Android Studio, upgrade Gradle if prompted. Set launchMode to singleTask in AndroidManifest.xml. Start your app using Android Studio...

Upgrade Angular CLI from Angular 8 to Angular 9

In this Angular 9 tutorial is focused on upgrade Angular CLI to 9 in Ubuntu. This example will help you upgrade Angular CLI version for Angular 8 to Angular 9 globally. This article will give you simple example of update Angular 8 to 9. We will look at example of upgrade angular 8 to 9. Let's see bellow example update Angular CLI version 8 to 9.