Angular 7 адаптивный макет с использованием Material Grid

В макетах сетки действительно имеют значение только соотношения (а не фактическое количество столбцов). В вашем случае соотношение между размерами плиток не меняется - первая плитка всегда в два раза шире, чем вторая и третья. Таким образом, вы можете математически уменьшить ваш мобильный макет до:

A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)

Теперь значения тайла colspan одинаковы для обоих макетов, единственная разница - количество столбцов. Это упрощает реализацию адаптивного дизайна, поскольку вам нужно всего лишь изменить значение cols между 12 и 6.

Привязать входное значение cols к выражению:

<mat-grid-list [cols]="isMobile ? 6 : 12">...

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {

  public isMobile: boolean = false;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ...
}

Вы также можете настроить точку останова в зависимости от размера экрана:

breakpointObserver.observe([
  '(max-width: 599px)'
]).subscribe(result => {
  this.isMobile = result.matches;
});

Чтобы настроить точку останова:

breakpointObserver.observe(['(min-width: 500px)'])