Morioh
Login
Nikunj Shah

Nikunj Shah

4 years ago

Ionic 4 Responsive Grid Tutorial with Examples

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.

4. Ionic 4 Image Gallery with Responsive Grid System

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.

#Ionic #angular #webdev

Ionic 4 Responsive Grid Tutorial with Examples
109.95 GEEK