角材料网格制作三列宽度100％

Question

我正在尝试在Angular Web应用程序上使用一个简单的三列系统。我刚刚在其子元素<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>

我需要这个：

可是，我明白了：

我已经尝试将CS​​S设置为：mat-grid-list { width: 100%; }，但我仍然看到相同的内容。

有没有建议使mat-grid-list像第一张图片一样工作？预先感谢。

Answer 1

请在第二个print(v) Max_Mass (kg/m) Index Max_Diameter (m) 0 30 3 3 1 60 201 3 2 90 300 1 3 100 400 1 中添加colspan="2"，然后您将获得与第一个图像一样的布局。

html代码在下面。

mat-grid-tile

供参考，添加了stackblitz代码。