Проблемы отображения Angular Virtual Scroll

Да, это ограничение для виртуальной прокрутки - она ​​работает со строками.

Если вам нужно, чтобы элементы отображались рядом друг с другом, вам нужно разделить их в компоненте на группы и заставить виртуальную прокрутку работать с группами.

Поскольку вы используете точки останова, вам нужно будет поработать над прослушиванием изменений точки останова. Вы можете сделать это с помощью MediaObserver.

Вам нужно будет настроить фильтрацию или сделать это в компоненте. Я опускаю это.

function split<T>(input: T[], groupSize: number): T[][]  {
  const out: T[][] = [];
  for(let i=0; i < input.length; i += groupSize) {
    out.push(input.slice(i, i + groupSize));
  }
  return out;
}


mediaObserver.media$.subscribe((change: MediaChange) => {
      
      if ( change.mqAlias == 'xs') {
         this.viewCourses = split(this.courses,1);
      }
      if ( change.mqAlias == 'md') {
         this.viewCourses = split(this.courses,2);
      }
      if ( change.mqAlias == 'lg') {
         this.viewCourses = split(this.courses,3);
      }
    });


<div fxLayout style = "margin-top: 40px" class = "row">
    <cdk-virtual-scroll-viewport [itemSize] = "20" class = "example-viewport">
      <div *cdkVirtualFor = "let courses of viewCourses">
        <div fxFlex.gt-md = "265px" fxFlex.lg = "265px" *ngFor = "let course of courses">
        <mat-card class = "course-card" >
         ...content
        </mat-card>
        </div>
      </div>
    </cdk-virtual-scroll-viewport>
  </div>