Question

我有一列由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>

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

Answer 1

在Angular Material文档中没有为MatGridListModule赋予width属性。

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

例如，如果要将行分为三部分，可以在mat-grid-list中给cols = 3。我们可以在mat-grid-tile中使用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>

设置材质的网格列表的宽度

1 个答案: