material-design - Material 网格平铺中的 Material 网格列表是否可行(嵌套网格)？

Question

我猜，是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗？
有人可以确认我的假设吗？
(我正在使用 Angular Material 6。)

<mat-grid-list cols="6" gutterSize="32px">
    <mat-grid-tile [colspan]="3">
        left
        <mat-grid-list cols="3" gutterSize="8px">
            <mat-grid-tile>1</mat-grid-tile>

            <mat-grid-tile [colspan]="2">2</mat-grid-tile>

            <mat-grid-tile [colspan]="3">3</mat-grid-tile>
        </mat-grid-list>
    </mat-grid-tile>

    <mat-grid-tile [colspan]="3">
        right
        <mat-grid-list cols="3" gutterSize="8px">
            <mat-grid-tile>4</mat-grid-tile>

            <mat-grid-tile [colspan]="2">5</mat-grid-tile>

            <mat-grid-tile [colspan]="3">6</mat-grid-tile>
        </mat-grid-list>
    </mat-grid-tile>
</mat-grid-list>

结果应该是这样的(两种不同的排水沟尺寸):



我为什么要这个？我必须实现的设计在列之间具有不同的 GUTTER SIZES :-/我认为网格中的网格将是一个聪明的解决方案，但它不起作用。

更新:
建议的解决方案 here不起作用，因为这仅适用于较旧的 Angular JS Material 。

Answer 1

在尝试了我能想到的一切之后，我得出的结论是 Material 网格中的 Material 网格是不可能的 并且可能在概念上不打算工作(可以理解)。

我决定使用 来解决我的问题CSS 网格 ( https://www.w3schools.com/css/css_grid.asp )。这有效(到目前为止):

<mat-grid-list cols="2" rowHeight="fit" gutterSize="32px">
<mat-grid-tile>
    <div class="css-grid">
        <div class="css-grid-tile top-left">
        </div>
        <div class="css-grid-tile top-right">
        </div>
        <div class="css-grid-tile bottom">
        </div>
    </div>
</mat-grid-tile>

<mat-grid-tile>
    <div class="css-grid">
        <div class="css-grid-tile top-left">
        </div>
        <div class="css-grid-tile top-right">
        </div>
        <div class="css-grid-tile bottom">
        </div>
    </div>
</mat-grid-tile>

.css-grid {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 33% 67%; // two columns
  grid-template-rows: 33% 67%; // two rows
  height: 100%;
  width: 100%;

  .css-grid-tile {
    &.top-left {
      grid-column: 1 / 2;
    }

    &.top-right {
      grid-column: 2 / 3;
    }

    &.bottom {
      grid-column: 1 / 3;
    }
  }
}