Angular中mat-grid-list无法正确显示mat-divider问题求助

这个问题我之前也踩过坑，核心原因是mat-grid-list的设计规则：它的直接子元素只能是mat-grid-tile。如果你直接在tile之间插入mat-divider，Angular Material的布局逻辑会把它识别为非tile元素，默认渲染在整个grid的最前方，这就是你看到的错位问题。下面给你几个实用的解决思路：

思路1：将mat-divider嵌入mat-grid-tile内部 #

适合在相邻tile之间添加分割线，根据分割方向（垂直/水平）调整位置：

垂直分割（并列tile之间） #

给需要添加分割线的tile内部加入垂直divider，同时设置高度占满tile，再调整margin控制间距：

<mat-grid-list cols="2" rowHeight="150px">
  <mat-grid-tile>
    <!-- 使用flex布局控制内容和分割线的位置 -->
    <div class="tile-inner">
      <div>左侧Tile内容</div>
      <mat-divider [vertical]="true" style="height: 100%; margin: 0 16px;"></mat-divider>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>右侧Tile内容</mat-grid-tile>
</mat-grid-list>

<!-- 配套CSS -->
<style>
.tile-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
</style>

水平分割（上下行tile之间） #

如果是多行grid，给每行的最后一个tile底部添加水平divider（注意排除最后一行）：

<mat-grid-list cols="2" rowHeight="150px">
  <mat-grid-tile *ngFor="let item of items; let last = last">
    <div>{{item.content}}</div>
    <mat-divider *ngIf="!last" style="width: 100%; margin-top: 16px;"></mat-divider>
  </mat-grid-tile>
</mat-grid-list>

思路2：用CSS模拟分割线（更灵活） #

如果不需要mat-divider的特殊样式（比如动画、主题适配），直接给tile加边框模拟分割线更简单，还能避免布局冲突：

/* 垂直分割：给除了最后一列的tile加右边框 */
.mat-grid-tile:not(:nth-child(2n)) { /* 这里的2n对应cols=2，根据你的cols值调整 */
  border-right: 1px solid rgba(0, 0, 0, 0.12); /* 匹配mat-divider默认主题色 */
}

/* 水平分割：给除了最后一行的tile加下边框 */
.mat-grid-tile:not(:nth-last-child(-n+2)) { /* 2对应cols=2，调整为你的cols数量 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

思路3：拆分grid实现行之间的大分割线 #

如果需要在整行tile之间添加独立的分割线，可以把每行拆成单独的mat-grid-list，然后在它们之间插入mat-divider：

<div class="grid-group">
  <mat-grid-list cols="3" rowHeight="150px">
    <mat-grid-tile>行1-1</mat-grid-tile>
    <mat-grid-tile>行1-2</mat-grid-tile>
    <mat-grid-tile>行1-3</mat-grid-tile>
  </mat-grid-list>
  
  <mat-divider style="margin: 8px 0;"></mat-divider>
  
  <mat-grid-list cols="3" rowHeight="150px">
    <mat-grid-tile>行2-1</mat-grid-tile>
    <mat-grid-tile>行2-2</mat-grid-tile>
    <mat-grid-tile>行2-3</mat-grid-tile>
  </mat-grid-list>
</div>

小提示 #

• 垂直方向的mat-divider必须手动设置height，否则不会显示；
• 如果tile内的布局混乱，用display: flex来控制内容和分割线的位置是最稳妥的方式；
• 可以通过color属性自定义mat-divider的颜色，匹配你的主题。

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