How can I have nested grid-lists in angular material?

Question

When I try to nest grids in angular, the internal grid disappear. Here is an example : https://stackblitz.com/edit/angular-eib7wz

I tried playing around with the column property but I still get a similar result, the nested grid does not show up at all.

I am using the grid list to separate my page into small sections and in each section I want to place a different component and one of these components is another smaller grid.

I am open to suggestions. Thank you for the help.

Answer 1

The grid does show up when nested, only the size the zero... so we add a div and style it... i deliberately put min-width:80%... to achieve your objective, you might want to put min-width:100%:

add the following relevant CSS:

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

relevant 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>

you can check a working stackblitz here