Отображение нескольких сеток в угловом материале

Question

Я пытаюсь отобразить 8 маленьких сеток на странице.Каждая сетка имеет 2 столбца и
4 строки, по 2 слова в каждой ячейке.

<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>

Я открыт для других предложений о том, как расположить их в приятном стиле, но я подумал, что:

• , если достаточно места для размещения 4 в одной строке, отобразить их в 2 строках: 4 + 4
• в противном случае, если достаточно места для размещения 3 в одной строке,отображать их в 3 строках: 3 + 3 + 2
• иначе, если достаточно места для размещения 2 в одной строке, отображать их в 4 строках: 2 + 2 + 2 + 2
• ещеотобразить их в 8 строках

Я не знаю, как это сделать, каков будет правильный подход для этой установки и условий?

Мне даже не удаетсяотображать 2 сетки в одной строке, кажется, что по умолчанию сетка занимает всю доступную ширину страницы.

Answer 1

Вы можете использовать модуль FlexLayout для прослушивания изменений мультимедиа и установки количества столбцов в зависимости от размера экрана.Затем вы привязываете значение cols к переменной количества столбцов. Вот пример Stackblitz .

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();
  }

}