Html mat卡与整个页面不匹配

我用的是有棱角的材料，Bootstrap

我试着展示适合所有屏幕的mat卡

但我看到卡片右侧有一个空白

对于某些屏幕分辨率，它是合适的。有人能建议我需要做什么吗

StacKblitz网址：

下面是空白区域的屏幕截图

移动视图位于屏幕截图下方

在屏幕下分辨率下工作良好

---

您可以使用引导网格实用程序，并为每个

mat卡指定列数。此外，您还可以指定希望它在什么屏幕大小上显示的方式。
例如，要在大屏幕上一行显示4张卡，在中屏幕上显示3张卡，在小屏幕上显示2张卡，可以执行以下操作：

class="col-lg-3 col-md-4 col-6"

以下是更新的代码：
您可以使用flex布局。
在flex布局标签之间添加垫卡

<div fxLayout="row wrap">
  <div fxFlex="25%" *ngFor="">
  </div>
</div>



这里fxFlex=“25%”表示一行中包含4个mat卡。
为什么固定宽度为350px？