The grid list is used to display your content in a list of rows and columns, while ensuring that it fills out the viewport. This is a very nice component if you want maximum freedom of deciding how to display content. This is a separate module called MatGridListModule. We need to add this to our list of imported modules, like so:

import { MatGridListModule } from '@angular/material';

@NgModule({
  imports: [MatGridListModule]
})

The component consists of a mat-grid-list element and a number of mat-grid-tile elements.

Let's add the mat-grid-list element first:

<mat-grid-list cols=4 rowHeight="300px">
</mat-grid-list>

Worth noting is how we set the number of columns and the height of each row. Now it's time to add the content. We do that by adding a number of mat-grid-tile instances, like so:

<mat-grid-list cols=4 rowHeight="300px">
  <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>

Here we are defining an *ngFor to point to our list of tiles. We also bind to [colspan], that decides how much column space it should take, [rowspan], that determines how many rows it should take, and lastly, we bind to the background property in our style.

The component looks like this:

tiles = [
  {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
  {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
  {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
  {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
];

We encourage you to explore the card and tabs component to learn more about the remaining layout components.