Displaying multiple grids in angular material

Question

I'm trying to display 8 small grids in a page. Each grid has 2 columns and
4 rows, with about 2 words per cell.

<mat-grid-list cols="2">
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
        </mat-grid-list>

I am opened to other suggestions on how to arrange them in a pleasing style, but what I was thinking was:

• if there is enough space to fit 4 in one line, display them on 2 lines: 4+4
• else if there is enough space to fit 3 in one line, display them on 3 lines: 3+3+2
• else if there is enough space to fit 2 in one line, display them on 4 lines: 2+2+2+2
• else display them on 8 lines

I don't really know how to do that, what would be the correct approach for this setup and conditionals ?

I can't even manage to display 2 grids on one line, it seems that by default a grid takes all the page width available.

Answer 1

You can use the FlexLayout module to listen to media changes and set the number of columns based on the screen size. Then you bind the cols value to the number of columns variable. Here is a Stackblitz example.

HTML:

<mat-grid-list [cols]="columns" rowHeight="2:1">
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
</mat-grid-list>

TS:

import { Component, OnDestroy } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs';

/**
 * @title Flexible grid-list
 */
@Component({
  selector: 'grid-list-flexible-example',
  styleUrls: ['grid-list-flexible-example.css'],
  templateUrl: 'grid-list-flexible-example.html',
})
export class GridListFlexibleExample implements OnDestroy {
  watcher: Subscription;
  columns: number = 4;

  constructor(media: ObservableMedia) {
    this.watcher = media.subscribe((change: MediaChange) => {
      if (change) {
        if (change.mqAlias == 'xs') {
          this.columns = 2;
        } else if (change.mqAlias == 'sm') {
          this.columns = 3;
        } else {
          this.columns = 4;
        }
      }
    });
  }

  ngOnDestroy() {
    this.watcher.unsubscribe();
  }

}