小编Pra*_*eep的帖子

我试图在每行创建 6 个图块，每个图块由左上角的金额、右上角的 + 符号、慈善机构名称下方、最左边的日期下方等组成。但一切都在中间发生。如何自定义每个 mat-grid-tile 的样式。

HTML Example

mat-grid-list cols="6" rowHeight="4:3" [gutterSize]="'10px'">
  <mat-grid-tile *ngFor="let item of items; let i=index">
    <div class="div-table">
      <div class="div-row">
        <div class="div-cell" style="font-weight: bold; font-size: medium;">{{amount | currency}}</div>  
      </div>
      <div class="div-row">
        <div>{{item.Name}}</div>
      </div>
    </div>
  </mat-grid-tile>

CSS Example


mat-grid-tile {
  background: lightblue;
}

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
}
.div-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-cell {
  float: left; 
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}