×

Understanding Angular Material Grid Layout

Manav Pandya  Print   10 min read  
16 May 2022
 
Intermediate
131K Views

In the Angular material, we do have a grid layout system similar to the bootstrap grid that is used to create the two-dimensional list view. in the Angular material library, we have a grid list module which is useful to create e the grid layout in our angular.

To use and implement the grid-based layout in our Angular application, we have to make some additional changes such as module and material themes and configurations inside our project, also the primary reason to choose Angular material is that it should be responsive across multiple devices, which means that the layout should be the same and adjustable automatically whenever the screen resolution will be changed, let’s say we have different type of screen size available for the devices such as laptops, tablets, and the mobile screen as well, so it should be responsive for all screen size and should not be disturb or change its layout adjustment when we run our apps on the different screen resolutions.

All things related to responsiveness, visual adjustments can easily be achieved by using the grid list module of the material package, so in this article, we will learn and get the introduction and detailed understanding about implementing with practice examples that can run on the different screen resolutions.

What is Angular Material Grid?

Angular Material Grid is a component that is used to structure the layout in a distributed way for multiple platforms are like Web, Mobile, Desktop, and other platforms are as well. Most developers may use bootstrap or any other front-end libraries already, the same way the angular material grid is used to manage cells into grid layout to make it more responsive elements into multiple devices.

We can have multiple options to adjust our web content into a grid that fits into our project functionality requirements in an easy manner, for that, we just need to specify the context in which we would like to render our HTML portion.

Angular Material Grid is a two-dimensional list view that contains a grid-based layout, so let us start with the actual use of a material grid.

Types of the material grid elements

We will use the different elements to create a material grid into our angular application which is listed below.

  1. Mat-grid-list

  2. Mat-grid-tile

  3. Mat-grid-tile-header

  4. Mat-grid-tile-footer

Mat-grid-list

Mat-grid-list is a selector to use the material grid in our project, using this markup we can easily include the grid into our HTML.

But keep in mind that just including the <mat-grid-list> selector would not work, because for that we need to include different chunks or let’s say tiles for that,

Syntax:

 <mat-grid-list>
 </mat-grid-list>
 

Properties

  1. Cols

    Specifies the number of columns to be generated.

  2. gutterSize

    Defines the size of the grid list’s gutter in a form of pixels, and always the default value will be 1px. And we can also specify the ratio or rem(root em) value with it.

  3. rowHeight

    It specifies the height of the grid list.

Example:

  1. Module file:

    Add the below import statement into your module file.

     import {MatGridListModule} from '@angular/material/grid-list';
     
  2. Html file:

     <mat-grid-list cols="4" [style.background]="'skyblue'">
     <mat-grid-tile>Tile 1 </mat-grid-tile>
     <mat-grid-tile>Tile 2 </mat-grid-tile>
     <mat-grid-tile>Tile 3 </mat-grid-tile>
     <mat-grid-tile>Tile 4 </mat-grid-tile>
     </mat-grid-list>
     

    And you will get output something like this.

    As you can see that it will create a grid with the list of 4 columns with almost 100px height because we do not provide any specific value, thus it will take default height automatically.

    We can use a few important properties as described above with a material grid so that we can have a more manageable grid for our single-page application.

    To implement those properties, we can try the below example for more and a better understanding. Open the HTML file and try the given code snippet.

     <mat-grid-list cols="4" rowHeight="100px" gutterSize="5px" 
     <mat-grid-tile *ngFor="let tile of tiles"
     [colspan]="tile.cols"
     [rowspan]="tile.rows"
     [style.border]="tile.border">
     {{tile.text}}
     </mat-grid-tile>
     </mat-grid-list>
     

    And to specify the basic settings to the grid and for the tile specifically, we need to provide appropriate properties to render the grid element as per our different functional requirements.

  3. Component file

    import { Component } from '@angular/core';
    
    export interface Tile {
     cols: number;
     rows: number;
     text: string;
     border: string;
    }
    
    @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    
     tiles: Tile[] = [
     {text: 'Tile 1', cols: 2, rows: 1 ,border: '3px double purple'},
     {text: 'Tile 2', cols: 2, rows: 1 ,border: '3px double red'},
     {text: 'Tile 3', cols: 2, rows: 1 ,border: '3px double skyblue'},
     {text: 'Tile 4', cols: 2, rows: 1 ,border: '3px double yellow'},
     ];
    }
    

    The component file contains the collection of fake data called Title as an array and the same data will be rendered as per the configuration of cols, rows, and border.

    When you will run the above example, you will get the output something like the given below image.

Mat-grid-tile

To use grid tiles into the grid we can use the mat-grid-tile selector as described below.

Syntax:

<mat-grid-tile>
 </mat-grid-tile>

Properties

  1. Rowspan

    The total amount of rows at the time of the grid takes

  2. Colspan

    The total amount of columns at the time of the grid takes

Example

We already did the same thing in the above example; you can see that I have specified rowspan and colspan as a primary property so that it will get appropriate space into the specific cell. In short, we are giving more space to each of the tiles by providing rowspan and colspan properties; you can find the difference like this.

Mat-grid-tile-header

With material grid tiles, we can also include a header showing some basic information or add some elements inside, for that we can use selector <mat-grid-tile-header>, let’s see the complete details that how actually header will be rendered.

Syntax

We need to include the given selector into the HTML file with the element we wanted to use with it.

 <mat-grid-tile-header>
 </mat-grid-tile-header>

Example

Open your HTML file and replace the following code snippet.

 <mat-grid-list cols="4" rowHeight="170px" gutterSize="5px">
 <mat-grid-tile *ngFor="let tile of tiles"
 [colspan]="tile.cols"
 [rowspan]="tile.rows"
 [style.border]="tile.border">
 <img src="./assets/Dotnettricks.png">
 <mat-grid-tile-header>
 <h3>{{tile.text}}</h3>
 </mat-grid-tile-heade>
 </mat-grid-tile>
 </mat-grid-list>
 

Output

After executing the above example, you will get probably a similar output like this.

We have used a grid tile header selector to load the header within the tile, and you can see that every tile contains a header with text for the information for the end-user, this is how we can include a header with our grid list.

Mat-grid-tile-footer

We have seen the example that how to use a header with a grid list, the same way using a material grid there is also a directive that provides the feature to add a footer.

It can be any element or just simple text, the same way if you want to add images or video content then it will be pretty straightforward to add anything we want to use with it.

Syntax

 <mat-grid-tile-footer>
 </mat-grid-tile-footer>

Example

To use the footer with our existing code, we just need one extra selector, then we are good to go.

 <mat-grid-list cols="4" rowHeight="170px" gutterSize="5px">
 <mat-grid-tile *ngFor="let tile of tiles"
 [colspan]="tile.cols"
 [rowspan]="tile.rows"
 [style.border]="tile.border">
 <img src="./assets/Dotnettricks.png">
 <mat-grid-tile-footer>
 <h3>{{tile.text}}</h3>
 </mat-grid-tile-footer>
 </mat-grid-tile>

 </mat-grid-list>
 

So basically I have used a selector for the footer, and also added an image from the local directory, after executing the above example you will get the output something like this.

At the bottom you can see that the number of tiles is rendered with the image we have used with it, So this is how we can use the header and footer with our material grid list.

So at last by combining it we will have a complete grid with tiles and obviously the header and footer part developed, let’s see the expanded example with it.

Example

 <mat-grid-list cols="4" rowHeight="170px" gutterSize="5px">
 <mat-grid-tile *ngFor="let tile of tiles"
 [colspan]="tile.cols"
 [rowspan]="tile.rows"
 [style.border]="tile.border">
 <img src="./assets/Dotnettricks.png">

 <mat-grid-tile-header>
 <h3>{{tile.text}}</h3>
 </mat-grid-tile-header>

 <mat-grid-tile-footer>
 <h3>{{tile.text}} </h3>
 </mat-grid-tile-footer>

 </mat-grid-tile>
 </mat-grid-list>

Output

Once we run the above-detailed example including header and footer, we can have a similar output like this.

This is how we have used all the necessary elements of an angular material grid with a simple yet effective example.

Summary

So now let’s revise whatever we have covered in this article, angular material is a handy thing that you can integrate easily with your angular application, moreover, it has a large number of components and also provides customization in some aspects, so choosing Angular material will give you great user interface experience for sure, keep working then.

Share Article

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

Learn to Crack Your Technical Interview

Accept cookies & close this