Угловой материал сетки, делающий три колонны шириной 100%

Question

Я пытаюсь использовать простую трехколоночную систему в веб-приложении Angular.Я просто использовал тег <mat-grid-list> с его дочерними элементами <mat-grid-tile>, но я вижу, что он просто заполняет 30% экрана.

Мой код

<mat-grid-list cols="4" id="page">
  <mat-grid-tile id="left-sidebar">
    <!-- Left Sidebar-->
  </mat-grid-tile>
  <mat-grid-tile id="main-content" colspan="2">
    <!-- Main Content -->
    <app-post></app-post>
    <router-outlet></router-outlet>
  </mat-grid-tile>
  <mat-grid-tile id="right-sidebar">
    <!-- Right Sidebar-->
  </mat-grid-tile>
</mat-grid-list>

Мне нужно это:

Но вот, я получаю это:

Я уже пытался установить CSS как: mat-grid-list { width: 100%; }но я все еще вижу то же самое.

Любые предложения, чтобы заставить mat-grid-list работать как первое изображение?Заранее спасибо.

Answer 1

Пожалуйста, добавьте colspan="2" во второй mat-grid-tile, тогда вы получите макет, подобный первому изображению.

html код ниже.

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile id="left-sidebar">
    <!-- Left Sidebar-->

  </mat-grid-tile>
  <mat-grid-tile id="main-content" colspan="2">
    <!-- Main Content -->
    <app-post></app-post>
    <router-outlet></router-outlet>
  </mat-grid-tile>
  <mat-grid-tile id="right-sidebar">
    <!-- Right Sidebar-->

  </mat-grid-tile>
</mat-grid-list>

Для справки добавлено stackblitz код.