如何使用Angular Material GridList实现网格列表堆叠？

一、实现GridList堆叠效果 #

你当前的两个GridList上下排列，是因为它们作为flex布局的子元素默认遵循文档流排列。要实现堆叠，需让它们脱离文档流并定位到同一区域：

1. 保持父元素<custom-element>的position: relative不变，作为绝对定位的参考容器；
2. 将两个mat-grid-list的定位方式从relative改为absolute，同时设置top: 0; left: 0; width: 100%; height: 100%;，让它们填满父容器并重叠；
3. 注意修正拼写错误：mat-grid-title是笔误，正确组件名是mat-grid-tile。

修改后的代码示例：

<custom-element style="position: relative; z-index: 0;">
  <mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: absolute; top:0; left:0; width:100%; height:100%; z-index:2">  
    <mat-grid-tile *ngFor="/* 背景瓦片生成逻辑 */">
      <img src="/* 背景瓦片地址 */"/>
    </mat-grid-tile>
  </mat-grid-list>
  <mat-grid-list cols="3" rowHeight="1:1" gutterSize="0px" style="position: absolute; top:0; left:0; width:100%; height:100%; z-index:3">  
    <mat-grid-tile *ngFor="/* 敌人瓦片生成逻辑 */">
      <img src="/* 敌人瓦片地址 */"/>
    </mat-grid-tile>
  </mat-grid-list>
</custom-element>

二、消除瓦片间隙（抗锯齿处理） #

设置gutterSize="0"后仍有间隙，大概率是组件内部默认边距/内边距，或是图片缩放的抗锯齿导致，可通过以下方式解决：

1. 强制移除GridList内部间距 #

给mat-grid-list添加自定义类（比如no-gap-grid），然后在全局样式文件（如styles.scss）中添加：

.no-gap-grid {
  .mat-grid-list-wrapper {
    margin: 0 !important;
  }
  mat-grid-tile {
    padding: 0 !important;
  }
}

在模板中引用该类：

<mat-grid-list class="no-gap-grid" cols="3" rowHeight="1:1" gutterSize="0px" ...>

2. 禁用图片抗锯齿 #

针对游戏瓦片这类像素风格元素，可通过CSS强制锐利渲染，避免模糊间隙：

mat-grid-tile img {
  image-rendering: pixelated; /* 像素化渲染，适合像素游戏 */
  /* 可选：image-rendering: crisp-edges; 保持边缘锐利 */
}

3. 匹配图片与Tile尺寸 #

确保图片的宽高和mat-grid-tile的实际尺寸完全一致，避免因缩放产生的间隙或模糊。

内容的提问来源于stack exchange，提问作者Panossa