Angular动态mat-expansion面板布局问题：消除侧边空白

问题根源是Bootstrap的col元素高度由自身内容决定，当同一行中某个面板展开导致所在col高度增加时，另一列高度未同步，从而出现空白。以下是两种可行的解决方法：

方法一：利用Bootstrap内置类实现等高列 #

修改row的类，添加align-items-stretch让所有列拉伸至同一行最高元素的高度，同时给mat-expansion-panel添加h-100类使其填满父容器：

<div class="row align-items-stretch">
    <div class="col-lg-6 col-md-6 col-sm-12 mt-3" *ngFor="let item of autoPanel; let idx = index">
        <mat-expansion-panel class="ml-2 mr-2 h-100" (click)="getCurrentKPIName(item,idx)">
            <mat-expansion-panel-header>
                <mat-panel-title class="d-flex align-items-center justify-content-between">
                    {{ item.name }}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <!-- 面板展开内容 -->
        </mat-expansion-panel>
    </div>
</div>

方法二：使用CSS Grid布局替代Bootstrap Row/Col #

Grid布局默认保证同一行单元格等高，更适合这种动态高度的场景：

HTML代码 #

<div class="expansion-grid">
    <div class="grid-item mt-3" *ngFor="let item of autoPanel; let idx = index">
        <mat-expansion-panel class="ml-2 mr-2" (click)="getCurrentKPIName(item,idx)">
            <mat-expansion-panel-header>
                <mat-panel-title class="d-flex align-items-center justify-content-between">
                    {{ item.name }}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <!-- 面板展开内容 -->
        </mat-expansion-panel>
    </div>
</div>

CSS样式 #

.expansion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    padding: 0 0.5rem;
}

.grid-item {
    display: flex;
}

两种方法都能确保面板展开时，同一行的列高度同步，消除空白区域。

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