I just got into Angular Material! Now I created a project and I'm trying to stack GridLists on each other. (Let's say for a grid based game. Tiled background with enemy tiles on top.)
The current hierarchy is:
<custom-element style="position: relative; z-index: 0;">
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:2">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
<mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: relative; z-index:3">
<mat-grid-title *ngFor="/* stuff generating an image */">
<img src="/* source dependent on the ngFor */"/>
</mat-grid-title>
</mat-grid-list>
</custom-element>
The custom element is inside a flex layout (row, space-around, every child has flex-grow: 1)
Though they are still below each other, not stacked. :/
How do I fix that?
(Btw I noticed a gutter size of 0px doesn't work perfectly. There's still some background color shining through between some tiles. I think it has to do with anti-aliasing but I have no idea how to disable it for the grid or something.)