css - Angular Material Mat Grid List 最外层边框

Question

我有一个垫子网格列表，其中包含用户定义的行数和列数。我需要显示每个 mat-grid-title 单元格的所有边框。

但是，如何正确显示 mat-grid-list 的最外层黑色边框？

它是正确的，底部边框没有正确显示

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>

这是我的堆栈 Blitz https://stackblitz.com/edit/angular-7gjjjn

谢谢

Answer 1

只需在 ma​​t-grid-title 元素中添加 box-sizing: border-box; CSS 属性，即可解决您的问题。谢谢

<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">
    <div class='internalMatGrid' >
      <mat-grid-list cols="1" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">2</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">3</mat-grid-tile>
  <mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">4</mat-grid-tile>
</mat-grid-list>