Understanding Angular Material Grid Layout

Manav Pandya  Print 
22 Aug 2018
23 Aug 2018
Intermediate
1.55K

Angular Material provides the Grid system to integrate material component into angular application in an easy manner, for that you need to follow the necessary steps.

What is Angular Material Grid?

Angular Material Grid is a component which is used to structure the layout in a distributed way for multiple platforms are like for Web, Mobile, Desktop, and other platforms are as well. Most of the developer 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 two-dimensional list views which contain 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 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 material grid into our project, using this markup we can easily include grid into our HTML.

But keep in mind that just including the <mat-grid-list> selector would not work, because for that we need 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 ratio or rem(root em) value with it.

  3. rowHeight

    It specifies the height of the grid list.

Example:

  1. Module file:

    Add 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 of 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 below example for more and a better understanding. Open 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'},
     ];
    }
    

    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 grid takes

  2. Colspan

    The total amount of columns at the time of 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 header show some basic information or to add some element 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 given selector into 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 the similar output like this.

We have used 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 grid list, same way using material grid there is also a directive which provides the feature to add a footer.

It can be any element or a just simple text, the same way if you want to add images or a video content than 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 footer with our existing code, we just need to one extra selector, than 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 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

After running above combined 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 which you can integrate easily with your angular application, moreover it has a large number of components and also provides the customization in some aspects, so choosing Angular material will give you great user interface experience for sure, keep working than.

Hands-on Learning
+