如何将所有边框绘制到角网格列表材料？答案

【问题标题】：How do I draw all the border to angular grid list material?如何将所有边框绘制到角网格列表材料？
【发布时间】：2019-07-16 05:01:45
【问题描述】：

我正在研究角度材料网格列表。如何在所有 mat-grid-tile 上应用/绘制黑色边框及其厚度，如下所示？为 mat-grid-tile 编辑 css 的类名是什么？

<mat-grid-list cols="12" rowHeight="200px">
    <mat-grid-tile colspan="3" rowspan="1">Text</mat-grid-tile>
    <mat-grid-tile colspan="3" rowspan="1">Text</mat-grid-tile>
    <mat-grid-tile colspan="3" rowspan="1">Text</mat-grid-tile>    
    <mat-grid-tile colspan="3" rowspan="1">Text</mat-grid-tile>
</mat-grid-list>

【问题讨论】：

标签： html css angular grid

【解决方案1】：

您只能通过 CSS 来实现。

在检查时，您会看到有一个名为 mat-grid-tile 的类。

在该类上，您添加以下 css 将帮助您提供边框，您还可以控制厚度、颜色等...

.mat-grid-tile {
    border: solid 2px #000;
}

检查下面的 StackBlitz，我在 style.scss 中添加了相同的 css。

StackBlitz

【讨论】：