Home >  Programming Blog >  Ionic Framework

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples

by Didin J. on May 27, 2025 Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples

Learn how to build responsive layouts using the Ionic 8 Grid system with Angular 19 and standalone components. Includes real layout examples

Table of Contents:

In this Ionic 8 tutorial, you’ll learn how to create responsive layouts using the Ionic Grid system with Angular 19. We’ll explore how to use rows, columns, and breakpoints to build flexible layouts that adapt to any screen size, from mobile to desktop. This guide also uses Angular standalone components and follows the latest best practices in Ionic and Angular development.

The Ionic Grid is a flexbox system that matches the mobile device screen with a custom layout. It's built by 3 elements of a grid: rows and cols. The rows are the children of the Grid, and the columns are the children of the rows. Column expansion will fill the row and resize depending on the sibling's column. The column width is based 12-column layout, it's similar to the Bootstrap grid column system. The grid can be customized using CSS.


1. Create a New Ionic 8 + Angular 19 Project

Updated Project Setup (2025)

npm install -g @ionic/cli
ionic start ionic-responsive-grid blank --type=angular
cd ionic-responsive-grid

 

When prompted:

  • Framework: Angular

  • Starter template: blank

Optional: Use Standalone Components

Ionic now supports standalone Angular components by default, so you don't need AppModule. We’ll use this approach in all examples.

File Structure Notes

After creation, the key file is:

  • src/app/app.component.ts → Root standalone component

  • We'll create additional page components in src/app/

Confirm Ionic & Angular Versions

Check your versions to match the latest:

ng version
ionic info

Expected output:

  • Ionic CLI: 8.x

  • Angular: 19.x

  • Ionic Framework: 8.x

Run the App

ionic serve

You should see the default blank Ionic screen.

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples - ionic serve


2. Basic Ionic Grid Layout Example

We’ll build a simple responsive layout with ion-grid, ion-row, and ion-col.

Create a New Standalone Component Page

ionic generate page pages/grid-basic --standalone

This creates:

src/app/pages/grid-basic/grid-basic.page.ts
src/app/pages/grid-basic/grid-basic.page.html

Modify grid-basic.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Basic Grid</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col size="6" sizeMd="4" sizeLg="3">
        <div class="box">Column 1</div>
      </ion-col>
      <ion-col size="6" sizeMd="4" sizeLg="3">
        <div class="box">Column 2</div>
      </ion-col>
      <ion-col size="6" sizeMd="4" sizeLg="3">
        <div class="box">Column 3</div>
      </ion-col>
      <ion-col size="6" sizeMd="4" sizeLg="3">
        <div class="box">Column 4</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Make sure ion-grid, ion-row, and ion-col imported in grid-basic.page.ts.

@Component({
  selector: 'app-grid-basic',
  templateUrl: './grid-basic.page.html',
  styleUrls: ['./grid-basic.page.scss'],
  standalone: true,
  imports: [IonCol, IonRow, IonGrid, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
})

Add CSS Styles

In grid-basic.page.scss or inline via styleUrls, add:

.box {
  background-color: #3880ff;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
}

Add a Route in app.routes.ts

If using standalone routing:

import { Routes } from '@angular/router';
import { provideRouter } from '@angular/router';
import { GridBasicPage } from './pages/grid-basic/grid-basic.page';

export const routes: Routes = [
  { path: '', component: GridBasicPage },
];

Then add in main.ts:

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

Modify src/app/home/home.page.html:

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

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-row>
      <ion-col><ion-button [routerLink]="['/grid-basic']">Basic Grid</ion-button></ion-col>
    </ion-row>
  </div>
</ion-content>

Make sure the new components are imported in src/app/home/home.page.ts:

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonRow, IonCol } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [RouterModule, IonCol, IonRow, IonButton, IonHeader, IonToolbar, IonTitle, IonContent],
})
export class HomePage {
  constructor() { }
}

Run the App

ionic serve

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples - basic grid
 

3. Responsive Breakpoints & Column Alignment

Ionic’s Grid system provides size, offset, and alignment utilities that adapt based on screen size breakpoints.

Update grid-basic.page.html for Responsive Breakpoints

Replace or extend the current content with:

<ion-header>
  <ion-toolbar>
    <ion-title>Responsive Grid</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <h2>Responsive Breakpoints</h2>
  <ion-grid>
    <ion-row>
      <ion-col size="12" sizeMd="6" sizeLg="4">
        <div class="box">Responsive Column 1</div>
      </ion-col>
      <ion-col size="12" sizeMd="6" sizeLg="4">
        <div class="box">Responsive Column 2</div>
      </ion-col>
      <ion-col size="12" sizeMd="12" sizeLg="4">
        <div class="box">Responsive Column 3</div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h2>Offset Columns</h2>
  <ion-grid>
    <ion-row>
      <ion-col size="6" offset="3">
        <div class="box">Centered with Offset</div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h2>Horizontal & Vertical Alignment</h2>
  <ion-grid>
    <ion-row class="ion-align-items-center ion-justify-content-between">
      <ion-col size="4">
        <div class="box">Start</div>
      </ion-col>
      <ion-col size="4">
        <div class="box">End</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Keep Styling in grid-basic.page.scss

.box {
  background-color: #3880ff;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
}

Explanation of Key Features

  • sizeMd, sizeLg: Controls column width at different screen sizes.

  • offset: Adds margin space before a column.

  • ion-align-items-center: Vertically aligns content in the row.

  • ion-justify-content-between: Horizontally distributes columns with space between.

Try Resizing

Use browser dev tools to test how columns adjust on:

  • Mobile (≤576px)

  • Tablet (≥768px)

  • Desktop (≥992px)

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples - responsive grid

 

4. Nested Grids and Auto Columns in Ionic

This section shows how to:

  • Nest a grid inside a column

  • Use auto-sizing columns that fit content dynamically

Update or Add to grid-basic.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Nested & Auto Columns</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <h2>Nested Grid</h2>
  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <div class="box">Parent Column
          <ion-grid>
            <ion-row>
              <ion-col size="6">
                <div class="box nested">Nested Column 1</div>
              </ion-col>
              <ion-col size="6">
                <div class="box nested">Nested Column 2</div>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h2>Auto Columns</h2>
  <ion-grid>
    <ion-row>
      <ion-col size="auto">
        <div class="box">Auto</div>
      </ion-col>
      <ion-col size="auto">
        <div class="box">Auto Column with more text</div>
      </ion-col>
      <ion-col>
        <div class="box">Remaining Space</div>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

Add or Extend CSS in grid-basic.page.scss

.box {
  background-color: #3880ff;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.box.nested {
  background-color: #00bfa5;
}

Explanation

  • Nested Grid: Simply place another <ion-grid> inside an <ion-col> — useful for layout blocks inside cards or sidebars.

  • size="auto": Makes the column as wide as its content.

  • No size on the third column: It fills the remaining space.

Test Responsiveness

Use browser dev tools to check how nested grids behave at different breakpoints and how auto columns adapt to their content.

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples - nested grid

 

5. Ionic Grid Alignment Utilities (Justify & Align)

Ionic provides utility classes to align columns horizontally and vertically within rows. These help you create flexible and centered layouts easily.

Add to grid-basic.page.html

<h2>Horizontal Alignment</h2>
  <ion-grid>
    <ion-row class="ion-justify-content-start">
      <ion-col size="4">
        <div class="box">Start</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-justify-content-center">
      <ion-col size="4">
        <div class="box">Center</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-justify-content-end">
      <ion-col size="4">
        <div class="box">End</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-justify-content-around">
      <ion-col size="3">
        <div class="box">Around 1</div>
      </ion-col>
      <ion-col size="3">
        <div class="box">Around 2</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-justify-content-between">
      <ion-col size="3">
        <div class="box">Between 1</div>
      </ion-col>
      <ion-col size="3">
        <div class="box">Between 2</div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <h2>Vertical Alignment</h2>
  <ion-grid style="height: 200px; background: #f1f1f1;">
    <ion-row class="ion-align-items-start" style="height: 100%;">
      <ion-col>
        <div class="box">Top Aligned</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-align-items-center" style="height: 100%;">
      <ion-col>
        <div class="box">Center Aligned</div>
      </ion-col>
    </ion-row>

    <ion-row class="ion-align-items-end" style="height: 100%;">
      <ion-col>
        <div class="box">Bottom Aligned</div>
      </ion-col>
    </ion-row>
  </ion-grid>

Add/Update grid-basic.page.scss

.box {
  background-color: #3880ff;
  color: #fff;
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 10px;
}

Explanation

  • Horizontal Alignment Classes:

    • ion-justify-content-start: Aligns columns to the start (left).

    • ion-justify-content-center: Centers columns horizontally.

    • ion-justify-content-end: Aligns columns to the end (right).

    • ion-justify-content-around: Equal space around columns.

    • ion-justify-content-between: Space between columns.

  • Vertical Alignment Classes (needs a fixed row height):

    • ion-align-items-start: Align to the top.

    • ion-align-items-center: Center vertically.

    • ion-align-items-end: Align to the bottom.

 

6. Practical Example: Ionic Grid Inside Cards and Lists

Ionic allows you to combine ion-grid With other UI components like ion-card and ion-list to create responsive, structured content blocks.

Grid Inside a Card Example

<ion-card>
  <ion-card-header>
    <ion-card-title>Team Members</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <div class="box">Alice</div>
        </ion-col>
        <ion-col size="6">
          <div class="box">Bob</div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6">
          <div class="box">Charlie</div>
        </ion-col>
        <ion-col size="6">
          <div class="box">Dana</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>

Grid Inside an ion-list

<ion-list>
  <ion-item>
    <ion-grid>
      <ion-row>
        <ion-col size="4">
          <strong>Order #</strong>
        </ion-col>
        <ion-col size="8">
          <span>#00123</span>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="4">
          <strong>Status</strong>
        </ion-col>
        <ion-col size="8">
          <ion-chip color="success">
            <ion-label>Delivered</ion-label>
          </ion-chip>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>
</ion-list>

Make sure all of the components are imported to the grid-basic.page.ts:

import { IonContent, IonHeader, IonTitle, IonToolbar, IonGrid, IonRow, IonCol, IonChip, IonLabel, IonList, IonItem, IonCard, IonCardHeader, IonCardTitle, IonCardContent } from '@ionic/angular/standalone';

@Component({
  selector: 'app-grid-basic',
  templateUrl: './grid-basic.page.html',
  styleUrls: ['./grid-basic.page.scss'],
  standalone: true,
  imports: [IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonItem, IonList, IonLabel, IonChip, IonCol, IonRow, IonGrid, IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
})

Styling Reminder

Make sure to include your .box style in grid-basic.page.scss if not already present:

.box {
  background-color: #3880ff;
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 10px;
}

Why Use Grid in Cards or Lists?

  • Improves structure inside content blocks like product cards, user profiles, or order summaries.

  • Maintains responsive behavior across all device sizes.

  • Keeps layout clean and aligned without relying on manual margins or floats.

Ionic 8 Responsive Grid Layout Tutorial with Angular 19 Examples

Conclusion

In this tutorial, we’ve explored how to use the Ionic Grid system effectively with the latest Ionic 8 and Angular 19. You learned how to:

  • Create basic grid layouts using <ion-grid>, <ion-row>, and <ion-col>

  • Make your layout responsive using Ionic’s built-in breakpoints

  • Utilize nested grids and auto columns

  • Apply alignment utilities to position content horizontally and vertically

  • Implement real-world examples with grids inside cards and lists

The Ionic Grid system is a powerful, flexible layout tool that plays well with the rest of the Ionic components. With responsive design built in and utility-first classes, you can easily create modern mobile-first UIs.

📦 Source Code

You can find the complete source code for this tutorial on GitHub:
👉 GitHub Repository (Ionic 8 Grid Tutorial)

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 6 - 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:

Thanks!

Related Articles

Programming Blog
JavaJavascriptHTML 5 TutorialCSS 3MongoDBIonic FrameworkGroovy and GrailsNode.jsReact NativeASP.NET CoreAngularVue.jsReact.jsFlutter TutorialMiscellaneousRustGolang (Go)
All Articles
Zizo Wireless