css - 角材料垫网格瓷砖高度

Question

• Angular 6+
• Angular Material 6+

与其他瓷砖相比，我希望单个mat-grid-tile具有较低的高度。试图通过设置[rowspan]=".3"属性来做到这一点。它确实使磁贴及其内容高度更小，但是这个“较小”磁贴与下一个磁贴之间的空间仍然好像磁贴具有[rowspan]="1". 设置下一个瓷砖[rowspan]=".7"并不能解决它 - 它们仍然是每个全高行的相同空间。

  <mat-grid-list [cols]="6" rowHeight="16rem">
    <mat-grid-tile [colspan]="2" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="4" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]=".3">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list> 

.dashboard-card {
  width: calc(100% - 60px);
  height: calc(100% - 60px);
}

这样做的正确方法是什么/如何解决上述问题？

标签： cssangularangular-material2

Answer 1

通过将行拆分为较小的行来解决。增加[rowspan]和减少rowHeight。

IE：

  <mat-grid-list [cols]="6" rowHeight="4rem">
    <mat-grid-tile [colspan]="2" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="1">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="6" [rowspan]="4">
      <mat-card class="dashboard-card">
         something
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>