行跨度的灵活高度

Question

我正在尝试实现一个基本的网格列表，但注意到内容的大小通常大于行高。

在此示例中，特别是标题为“信息”的卡片。

代码是由仪表板原理图预先生成的，我只是对其进行了调整。

我查看了 rowHeight="fit" 但没有。

有什么方法可以使行高度动态化？

代码：

<mat-grid-list cols="4">
        <mat-grid-tile [colspan]=1>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Details
                        <button mat-icon-button class="edit-button">
                            <mat-icon>edit</mat-icon>
                        </button>
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <pre>{{ itData| json }}</pre>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
        <mat-grid-tile [colspan]=3>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Card 2
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <div>Card Content Here</div>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
        <mat-grid-tile [colspan]=4>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Information
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <button mat-raised-button color="primary" (click)="toggleDetails()">{{ show ? 'Add IT' : 'View IT'}}</button>
                    <br>
                    <section *ngIf="!show">
                        <sc-it-new></sc-it-new>
                    </section>
                    <section *ngIf="show">
                        <sc-it-table></sc-it-table>
                    </section>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>

Answer 1

MatGridList 不是布局组件。它是一个“网格”组件。 “网格”意味着所有列和所有行都具有相同的宽度或高度。所以网格列表的目的是使其所有的图块大小相同。如果您试图灵活地布局内容，那么它不是正确的组件选择。

尽管如此，我认为无论如何都不可能做你想做的事。可以动态更改列数或图块的宽高比，但不能仅针对某些行或列。