Angular Material Grid Layout Example

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 the grid layout in angular.


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.

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


Types of the material grid elements

  1. mat-grid-list
  2. mat-grid-tile
  3. mat-grid-tile-header
  4. mat-grid-tile-footer

1. mat-grid-list

Syntax :

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

Properties :

  • cols : Specifies the number of columns to be generated.
  • rowHeight : It specifies the height of the grid list.
  • gutterSize :
    • gutter size in pxem, or rem units
    • Defines the size of the grid list’s gutter in a form of pixels, and always the default value will be 1px.
    • we can also specify the ratio or rem(root em) value with it.

Example : mat-grid-list Example for 2 Columns

app.module.ts :

Add the below import statement into your module file.

import { MatGridListModule } from '@angular/material/grid-list'; 

@NgModule({
  imports: [
    //other modules
    MatGridListModule,
    //other modules
  ]
})
export class AppModule {}

app.component.html

<mat-grid-list cols="2" rowHeight="2:1" [style.background]="'skyblue'">
    <mat-grid-tile> Grid first </mat-grid-tile>
    <mat-grid-tile> Grid second </mat-grid-tile> 
    <mat-grid-tile> Grid third </mat-grid-tile>
    <mat-grid-tile> Grid fourth </mat-grid-tile>
</mat-grid-list>

Output :

And you will get output something like this.

MatGridList Example for 2 Columns

As you can see that it will create a grid with the list of 2 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.


Example : Dynamic mat-grid-list Example with 4 Columns

app.component.html

<mat-grid-list cols="4" rowHeight="100px" gutterSize="5px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color"
      >
    {{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.

app.module.ts

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

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
}

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {

  tiles: Tile[] = [
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightblue'},
    {text: 'Four', cols: 1, rows: 1, color: 'lightgreen'},
  ];
}

Output :

And you will get output something like this.

Dynamic MatGridList Example with 4 Columns

2. 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 :

  • Rowspan

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

  • Colspan

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


Example : mat-grid-tile Colspan & Rowspan Example

MatGridTile Colspan & Rowspan Example

3. mat-grid-tile-header

Syntax :

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

Example : mat-grid-tile Header Example with 4 Columns

app.component.html

<mat-grid-list cols="4" rowHeight="200px" gutterSize="5px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
  <mat-grid-tile-header>
    <h4>Angular Material</h4>
  </mat-grid-tile-header>
  </mat-grid-tile>
</mat-grid-list>

Output :

And you will get output something like this.

MatGridTile Header Example with 4 Columns

4. mat-grid-tile-footer

Syntax :

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

Example : mat-grid-tile Footer Example with 4 Columns

app.component.html

<mat-grid-list cols="4" rowHeight="200px" gutterSize="5px">
  <mat-grid-tile
      *ngFor="let tile of tiles"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
  <mat-grid-tile-footer>
    <h4>Angular Material</h4>
  </mat-grid-tile-footer>
  </mat-grid-tile>
</mat-grid-list>

Output :

And you will get output something like this.

MatGridTile Footer Example with 4 Columns

I hope you like this amazing article.


Also Read: