Угловой список мат-сетки не соответствует содержимому, как ожидалось

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>

Я не добавил никаких дополнительных / пользовательских CSS в test.component.

Обратите внимание, это выглядит нормальноесли вы развернули его полностью на мониторе 4K.Выравнивание отключено, но, по крайней мере, содержимое здесь полностью не потеряно.Это меньше ... 2k или 3/4 экрана на 4k, где начинается обрезка контента.

Нужно ли для этого переключаться на настраиваемый flexbox?

Это мой target look: (в идеале количество столбцов будет автоматически сдвигаться с меньшим разрешением)

Stabblitz

Answer 1

Используя существующий стек, вы можете внести эти 2 изменения, чтобы получить то, что вам нужно

заменить card-review-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>