Angular 从“材质”设置“材质网格列表”的宽度

我有一列由3行组成，每行的高度为200px

<mat-grid-list cols="1" rowHeight="200px">

  <mat-grid-tile rowspan="1" style="background-color: lightblue">
    FIRST
  </mat-grid-tile>
  <mat-grid-tile rowspan="1" style="background-color: #EDC2EC;">
    <mat-card-content style="text-align: center;">
      <p style="font-size: xx-large;">ALWAYS FREE</p>
      <p style="font-size: large;">Great for occasional use</p>
    </mat-card-content>
  </mat-grid-tile>
  <mat-grid-tile rowspan="1" [style.background]="lightpink">
    third
  </mat-grid-tile>

</mat-grid-list>

第一
始终免费

非常适合偶尔使用

第三

---

但是如何为我的行设置宽度？

角度材质文档中没有为MatGridListModule提供宽度属性

为了获得宽度，我们可以尝试同时使用cols和colspan属性

比如说,， 如果我们想将行分成3部分，我们可以在mat grid列表中给出cols=3。 我们可以在网格瓷砖中使用colspan属性。 这完全取决于我们的要求

更新

为了满足您在组件中提到的要求， 我们可以使用cols属性，它将为您提供列布局和gutterSize属性，以提供它们之间的边距

检查下面的示例代码段

<mat-grid-list cols="4" rowHeight="200px" [gutterSize]="'40px'">

  <mat-grid-tile style="background-color: lightblue">
    first
  </mat-grid-tile>
  <mat-grid-tile style="background-color: #EDC2EC;">
    second
  </mat-grid-tile>
  <mat-grid-tile style="background-color: lightcoral">
    third
  </mat-grid-tile>
  <mat-grid-tile style="background-color: orange">
    fourth
  </mat-grid-tile>

</mat-grid-list>

第一
第二
第三
第四

这是2行而不是3行，基本上我想做的是在这个页面上有4个网格列表，每个网格列表有3行，请输入上面的示例代码，希望它能满足您的要求。一行4列，我想要的是1列和3行，但仍然不知道如何设置宽度，我改主意使用mat card