Angular Material Grid List Examples with Code

Can you show me some examples of using Angular Material's grid list?

Sure! Angular Material's grid list allows you to create a responsive grid layout. Would you like to see a basic example?

Yes, please provide a simple code example.

Here's a basic example:

<mat-grid-list cols="3" rowHeight="100px">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
</mat-grid-list>

This creates a grid with 3 columns and each tile has a height of 100 pixels.

How can I make the grid responsive?

You can use the rowHeight property with a value of 'fit' to make the grid responsive. Here's an example:

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