css - Angular mat-grid-list 不符合预期的内容

Question

我想要一个适合垫卡内容的 mat-grid-list。我希望得到等间距的列。每行 4 张卡片。我弄得一团糟。如果我用纯文本替换 mat-card 的内容，那么它看起来不错。如何以这种方式正确显示 mat-form-fields？

<mat-tab-group>
  <mat-tab label="Active">
    <mat-grid-list cols="4" rowHeight="100px" gutterSize="50px">
      <mat-grid-tile *ngFor="let number of [0,1,2,3,4,5,6,7,8]">
        <mat-card>
          <div class="example-container">
            <mat-form-field>
              <input matInput placeholder="Input">
            </mat-form-field>
            <mat-form-field>
              <textarea matInput placeholder="Textarea"></textarea>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Select">
                <mat-option value="option">Option</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>
  </mat-tab>
</mat-tab-group>

我没有向 test.component 添加任何额外/自定义 CSS。

请注意，如果您在 4K 显示器上将其完全展开，这看起来确实不错。对齐已关闭，但至少这里没有内容完全丢失。它是 4k 上较小的...2k 或 3/4 屏幕，它开始修剪内容。

我需要为此切换到自定义 flexbox 吗？

这是我的目标外观:(理想情况下列数会随着分辨率的降低而自动移动)

stackblitz

Answer 1

使用现有的 stackblitz，您可以进行这 2 项更改以获得所需的内容

将您的 card-overview-example.css 替换为:

.mat-card { display:inline-block; max-width:200px; min-width:100px; margin:0 10px; }

将您的 card-overview-example.html 替换为:

<mat-tab-group>
  <mat-tab label="Active">
    <ng-container *ngFor="let number of [0,1,2,3,4,5,6,7,8]">
        <mat-card >
          <h2>Some Name</h2>
          <div class="example-container">
            <mat-form-field>
              <input matInput placeholder="Input">
            </mat-form-field>
            <mat-form-field>
              <textarea matInput placeholder="Textarea"></textarea>
            </mat-form-field>
            <mat-form-field>
              <mat-select placeholder="Select">
                <mat-option value="option">Option</mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </mat-card>
      </ng-container>
  </mat-tab>
</mat-tab-group>