Как я могу иметь вложенные сеточные списки в угловых материалах?

Question

Когда я пытаюсь вложить сетки в угловые, внутренняя сетка исчезает.Вот пример: https://stackblitz.com/edit/angular-eib7wz

Я попытался поэкспериментировать со свойством column, но я все еще получаю аналогичный результат, вложенная сетка вообще не отображается.

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

Я открыт для предложений.Спасибо за помощь.

Answer 1

Сетка отображается при вложении, только размер равен нулю ... поэтому мы добавляем div и стилизуем ее ... я намеренно ставлю max-width:80% ... для достижения вашей цели, вы можете поставить max-width:100% * * 1003

добавить следующее соответствующее CSS :

.internalMatGrid{  border:1px solid red; min-width:80%;}

релевантно HTML :

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <div class='internalMatGrid' >
      <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
        <mat-grid-tile>2</mat-grid-tile>
        <mat-grid-tile>3</mat-grid-tile>
        <mat-grid-tile>4</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

Вы можете проверить рабочий стек стека здесь