Question

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

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

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

我愿意提出建议。谢谢您的帮助。

Answer 1

当嵌套时，网格确实会显示出来，大小只有零...所以我们添加了div并设置了样式...我故意放max-width:80% ...以实现您的目标，您可能想要将max-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>

您可以检查working stackblitz here

Answer 2

在某些具有嵌套 Material 组件的情况下，例如 mat-grid-list，您需要同时使用 /deep/ 和 !important。

例如，使用此 HTML 代码：

      <mat-grid-list *ngFor="let diet of diets"
          cols="8" 
          rowHeight="210px" 
          gutterSize="1px">
        <mat-grid-tile class="diet-name">
            {{ diet.name }} 
        </mat-grid-tile>
        <mat-grid-tile *ngFor="let day of diet.days"
            class="outer-tile">
          ...
        </mat-grid-tile>
      </mat-grid-list>

如果您想在文本周围添加样式（最终包含在 <figure> 标记中），您需要在 CSS 中使用以下内容：

/deep/ .mat-grid-tile.diet-name figure.mat-figure {
  margin: 0 5px !important;
}

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

2 个答案: