Установка rowHeight отдельной плитки в mat-grid-list (Angular 6)

Question

У меня есть mat-grid-list, который содержит n элементов mat-card. В нижней части таблицы я хочу добавить свой собственный пользовательский paginator, который центрируется на странице (по разным причинам я не хочу использовать mat-paginator, если это вообще возможно).

Я попытался просто добавить элемент <div> под элементом mat-grid-list и установить для поля значение 0 auto; (что я обычно делал бы для центрирования div), но это не похоже работать (постраничная навигация упорно остается по левому краю).

Я могу добавить новую плитку к mat-grid-list, которая появляется после всех остальных плиток, и установить ее [colspan] равной количеству столбцов. Когда я делаю это, я получаю идеально центрированный пагинатор, за исключением того, что существует огромное количество избыточной высоты (предположительно, потому что он использует высоту других mat-grid-tile элементов, которые достаточно велики).

Есть ли способ: а) заставить paginator выравнивать по центру по своему собственному div или б) изменить rowHeight одного mat-grid-tile, чтобы у меня не было смешного количества пустого пространства вокруг пагинатора? Разметка ниже:

mat-grid-list с нумератором страниц в div

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <div class="paginator">
    <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
      <mat-icon aria-label="Previous">navigate_before</mat-icon>
    </button>
    <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
      <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
    </ng-container>
    <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
      <mat-icon aria-label="Next">navigate_next</mat-icon>
    </button>
  </div>
</div>

CSS для класса .paginator

.paginator {
  margin: 0 auto;
  padding-top: 20px;
}

(Примечание: я также пытался установить display в inline-block и width в 100%, но ни один из них не работал).

mat-grid-list with paginator in a separate мат-сетка-tile`

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="5">
      <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
        <mat-icon aria-label="Previous">navigate_before</mat-icon>
      </button>
      <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
        <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
      </ng-container>
      <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
        <mat-icon aria-label="Next">navigate_next</mat-icon>
      </button>
    </mat-grid-tile>
  </mat-grid-list>
</div>

Answer 1

Вы можете попробовать установить для ряда строк отдельной плитки, например, .5 (или что-нибудь более подходящее). Я не уверен, что он работает с этим синтаксисом, но он работает в моем случае, когда я явно задаю rowHeight для mat-grid-list и использую rows: .5 для конкретной плитки в списке плиток.