web-dev-qa-db-ja.com

マテリアルグリッドタイルのマテリアルグリッドリストは可能ですか（ネストされたグリッド）？

マテリアルグリッド（ネストグリッド）にマテリアルグリッドを配置することはできませんか？
誰かが私の仮定を確認してもらえますか？
（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>

結果は次のようになります（2つの異なる樋サイズ）：

enter image description here

なぜこれが欲しいのですか？私が実装しなければならないデザインには、列間で異なる溝サイズがあります：-/グリッド内のグリッドは賢い解決策になると思いましたが、機能しません。

更新：提案されたソリューション here は機能しません。これは古いAngular[〜＃〜] js [〜＃〜]マテリアルでのみ可能であるためです。

material-designangular6angular-material-6
5
jasie

マテリアルグリッドのマテリアルグリッドは不可能であり、おそらく概念的には機能することを意図していない（理解できる） ）。

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;
    }
  }
}
4
jasie