Angular Material Grid List

Now it's time to take a look at the material grid list in this video the grid list is basically a two dimensional list view that arranged ourselves into grid based layout.

Great now the first step is to import the module in material.module.ts and add it to MaterialCompoents[] array.

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

const MaterialComponents = [
  MatGridListModule
];

Now that we have imported the MatGridListModule we can create a grid list in our HTML file, the component for that module is mat-grid-list and this component requires a calls attributes which specifies the number of columns in the grid let's go with 2 columns in this example so cols="2" as children to this component we specify mat-grid-tile component.

<mat-grid-list cols="2">
  <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>

Also to be able clearly see the grid let's add a backgound color to the tiles so in the app.component.scss file add this styling.

mat-grid-tile {
  background-color: lightblue;
}

If you save and take a look at the browser. material grid list

You can see the gird with two columns and two rows the question is how did it create the two rows ? for a grid we always specify the number of columns and the number of rows is determined by how many columns we want and the number of tiles specified, since we have four tiles and two columns it can fit only tiles in each row hence it creates an additional row to fit the next two tiles, if you want to have five tiles it would be three rows. So the number of rows is determined by some basic math.

Of course you can also specify how many rows or columns each tile should take that can be specified the rowspan and colspan. On tile 1 if I said rowspan="2"

<mat-grid-list cols="2">
  <mat-grid-tile rowspan="2">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>

Save and take a look you can see that Tile 1 takes two rows instead of one, similarly if I said colspan="2".

<mat-grid-list cols="2">
  <mat-grid-tile rowspan="2" colspan="2">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>

You can see that Tile 1 takes two columns instead of one. But when specifying colspan though you need to make sure it does not exceed the cols attribute if it does it throws an error.

Next let's talk about the height of each row in the grid, by default the height of a row is equal to the with of a column however you can override this using the rowHeight attribute and you can specify one of the three possible values the first one is a straightforward value.

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

angular material grid list rowHeight

Take a look at the browser and you can see that each row will be a 100 pixels tall.

The second option is to specify the row height as a ratio with respect to the column width for example rowHeight="2:1" this implies that the rowHeight is 1/2 the column width, if the column width is 200px then the row height will be a 100px.

<mat-grid-list cols="2" rowHeight="2:1">
  <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>

mat-grid-tile As you can see above that the height looks half the width.

The third option is to fit the height based on the container so rowHeight="fit" but this time we also need to specify a height for the container with some styling style="height:200px".

<mat-grid-list cols="2" rowHeight="fit" style="height: 200px">
  <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>

If you save and take a look at the browser you can see that the rows are fit into the container height of 200 pixels so each row has a height of a 100 pixels if there were four rows each row would be 50 pixels so as to fit the total container height of 200 pixels in this case.

The last attribute I want to discuss on a grid list is the gutter size that is spacing between the tiles we can specify gutter size using the gutterSize attribute on mat-grid-list component.

<mat-grid-list cols="2" rowHeight="2:1" gutterSize="50px">
  <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>

mat-grid-list gutterSize As you can see there is additional spacing between the different tiles.

Alright that is about the grid list in angular material.