Awesome Angular Material Responsive Grid List With Cards Example

Angular Material Cards can be added to the Grid List component as a child of a mat-grid-tile component. Adding responsive handling to the Grid List really makes an excellent user interface. However, styling the Cards can be challenging.

In this example we will learn how to do the following:

• Make the Grid List responsive
• Right align the avatar in the Card Header
• Make the avatar a circular image
• Increase Card Header font size

We will create the Grid List and Cards shown below:

Angular Material Grid List With Cards Example

Full code for this example is in the Resources section.

How to Add Cards to an Angular Material Grid List

We will construct a mat-grid-list filled with children mat-grid-tile components. Inside each tile we will have one mat-card component. This allows us to do several things:

• iterate over data to render multiple tiles and cards
• change the tiles per column on resize
• write our card code only once

In our card-grid.ts file, I have an array of card objects that have two fields:

{title: "Card 1", content…