如何在角材料中嵌套网格列表？

Question

当我尝试以角度嵌套网格时，内部网格消失了。这是一个例子：https : //stackblitz.com/edit/angular-eib7wz

我尝试使用 column 属性，但仍然得到类似的结果，嵌套网格根本不显示。

我使用网格列表将我的页面分成小部分，在每个部分中我想放置一个不同的组件，其中一个组件是另一个较小的网格。

我愿意接受建议。感谢您的帮助。

Answer 1

网格确实在嵌套时显示，只有大小为零...所以我们添加一个 div 并设置它的样式...我故意放置min-width:80%...为了实现您的目标，您可能想要放置min-width:100%：

添加以下相关CSS：

.internalMatGrid{  border:1px solid red; min-width:80%;}

相关的HTML：

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <div class='internalMatGrid' >
      <mat-grid-list cols="2" rowHeight="2:1">
        <mat-grid-tile>1</mat-grid-tile>
        <mat-grid-tile>2</mat-grid-tile>
        <mat-grid-tile>3</mat-grid-tile>
        <mat-grid-tile>4</mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

你可以在这里检查一个有效的stackblitz