Mat grid inside another mat grid

[LRagji]

Bug Reproduction

StackBlitz

<mat-grid-list gutterSize="0" cols="14" rowHeight="2:1" [ngStyle]="{background:'#E5E5E5'}">
    <mat-grid-tile colspan="1" rowspan="3"></mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1" [ngStyle]="{background:'lightgreen'}"><span>Header</span></mat-grid-tile>
    <mat-grid-tile colspan="8" rowspan="1"></mat-grid-tile>
    <mat-grid-tile colspan="2" rowspan="1" [ngStyle]="{background:'lightgreen'}"><span>Header</span></mat-grid-tile>
    <mat-grid-tile colspan="1" rowspan="3"></mat-grid-tile>
    <mat-grid-tile colspan="12" rowspan="1" [ngStyle]="{background:'red'}">
        <mat-grid-list gutterSize="0" cols="8" rowHeight="8:1" [ngStyle]="{width:'100%',height:'100%'}" >
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">1</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">2</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">3</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">4</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">5</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">6</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">7</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">8</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">9</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">10</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">11</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">12</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">13</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">14</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightblue'}">15</mat-grid-tile>
            <mat-grid-tile colspan="1" rowspan="1" [ngStyle]="{background:'lightgreen'}">16</mat-grid-tile>
        </mat-grid-list>
    </mat-grid-tile>
    <mat-grid-tile colspan="12" rowspan="1" [ngStyle]="{background:'lightgreen'}"><span>Observations</span>
    </mat-grid-tile>
    <mat-grid-tile colspan="14" rowspan="1" [ngStyle]="{background:'#E5E5E5'}"><span>Tabs</span></mat-grid-tile>
</mat-grid-list>

Expected Behavior

I should be able to see all numbers from 1 to 16, translates to both rows of inner grid

Actual Behavior

I only see numbers from 9 to 16, translates to only second row is visible of the inner grid even when space if available(marked by red bg color of the inner grid)

Environment

• Angular:8.2.14
• CDK/Material:8.2.3
• Browser(s):Chrome 78
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[LRagji]

Any help will be appreciated
Live Example

[LRagji]

Solved it the problem is mat grid aligns everything in center(justify) putting the following style moves it to start and content as well which solves the above issue.

mat-grid-tile .mat-figure {
   justify-content: flex-start !important ;
   align-items: flex-start !important;
}

Still keeping this open to validate if there is any better way.

[jelbourn]

Closing this because we are pretty unlikely to add new features to MatGridList going forward now that CSS Grid provides a significantly more robust tool for creating this style of layout.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}