How to Create Responsive Grid Layout in Ionic 5 App

Ionic 5 responsive grid layout tutorial; This extensive example will explain how to create a responsive grid layout in Ionic Angular application with the help of the ion-grid property. Furthermore, we will try-out ion-grid properties and methods to develop a mobile-first flexbox system.

The grid is a powerful mobile-first flexbox system for building custom Ionic keeps on intensifying the support for the desktop application. One more feather to the cap is their all-new responsive grid system that propels the user-interface development to new heights.

The grid in Ionic is a robust mobile-friendly flexbox grid system that is made of three components a grid, row, and columns.

The ion-grid is not a normal feature; well, it is the most famous flexbox grid which is used to create a custom layout with flexbox, columns are created inside the row, Its width adjusts according to the device size and or the obtainable space within the inserted row

Ionic 5 Responsive Flexbox Grid System Example

  • Step 1: Install New Ionic App
  • Step 2: Create Responsive Grid
  • Step 3: Ionic Row
  • Step 4: Ionic Column
  • Step 5: Create Image Gallery with Flexbox Grid System
  • Step 6: Run App with Ionic Lab

Install New Ionic App

It is my belief that you should begin this tutorial by installing the Ionic CLI tool:

npm install -g @ionic/cli

Right after installing the Ionic command-line-interface install a new blank Ionic Angular app:

ionic start ionic-grid-layout blank --type=angular

Now, make way to project folder:

cd ionic-grid-layout

Create Responsive Grid

The grid system is created using the ion-grid attribute, and it is a 12 column layout with various breakpoints that works based on the screen size. Additionally, you can customize it using CSS.

The following grid system contains 3 row with 2 columns, 4 columns, and 3 columns.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col>
        Col 1 of Row 1
      </ion-col>
      <ion-col>
        Col 2 of Row 1
      </ion-col>    
    </ion-row>
    
    <ion-row>
      <ion-col>
        Col 1 of Row 2
      </ion-col>
      <ion-col>
        Col 2 of Row 2
      </ion-col>
      <ion-col>
        Col 3 of Row 2
      </ion-col>
      <ion-col>
        Col 4 of Row 2
      </ion-col>      
    </ion-row>
    
    <ion-row>
      <ion-col>
        Col 1 of Row 3
      </ion-col>
      <ion-col>
        Col 2 of Row 3
      </ion-col>
      <ion-col>
        Col 3 of Row 3
      </ion-col>
    </ion-row>
    
  </ion-grid>
</ion-content>

ion-row

In a grid system, rows play a vital role, and they help form the horizontal layout where columns are added to create an adaptive layout.

Rows are flex-containers; in a row, columns automatically acquire the row’s full height; you can customize the row by adding the various CSS classes.

ion-col

Columns are created using the ion-col attribute; they declare inside the ion-row and form a responsive flexbox grid system that helps the app layout to adapt as per the screen size. Columns extend and obtain the space in the row.

Gallery with Flexbox Grid System

Creating a responsive layout in the Ionic grid is an easy process; in this example we will show you how to create a simple image gallery using an ionic grid system effortlessly.

Get inside the TypeScript template and create an array and add an image url into it.

Update home.page.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  ImageCollection = [
    {
      url: "https://via.placeholder.com/150/92c952"
    },
    {
      url: "https://via.placeholder.com/150/771796"
    },
    {
      url: "https://via.placeholder.com/150/24f355"
    },
    {
      url: "https://via.placeholder.com/150/d32776"
    },
    {
      url: "https://via.placeholder.com/150/f66b97"
    },
    {
      url: "https://via.placeholder.com/150/56a8c2"
    },
    {
      url: "https://via.placeholder.com/150/b0f7cc"
    },
    {
      url: "https://via.placeholder.com/150/54176f"
    },
    {
      url: "https://via.placeholder.com/150/51aa97"
    },
    {
      url: "https://via.placeholder.com/150/810b14"
    },
    {
      url: "https://via.placeholder.com/150/1ee8a4"
    },
    {
      url: "https://via.placeholder.com/150/66b7d2"
    },
    {
      url: "https://via.placeholder.com/150/197d29"
    },
    {
      url: "https://via.placeholder.com/150/61a65"
    },
    {
      url: "https://via.placeholder.com/150/f9cee5"
    },
    {
      url: "https://via.placeholder.com/150/fdf73e"
    }
  ]

  constructor() {
  }

}

Define ion-grid, ion-row, and ion-col to create a grid layout for the image gallery component. Use the ngFor directive to loop over the image collection and pass the image url in the image background property.

Update home.page.html file:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic Flexbox Grid Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col sizeLg="4" sizeMd="4" sizeXs="6" *ngFor="let img of ImageCollection">
        <div 
           class="img-box" 
           [style.background-image]="'url('+ img.url +')'">
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Ultimately, add a little bit of style to make the image gallery aesthetically pleasant.

Update home.page.scss file:

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

Run App with Ionic Lab

Subsequently, run command to install the lab package.

npm i @ionic/lab --save-dev

Eventually, run app on the browser emulator:

ionic serve -l

ionic Grid system example

Conclusion

The ionic Grid system tutorial is over. We had a chance to look into the anatomy of the Ionic grid, which simplifies the process of creating a robust and responsive layout in the ionic app using the flexbox grid system.