如何在mat-option中使用mat-grid或grid列表，而不是使用CSS display grid

Question

我的name和id都顯示在mat-option的兩行中，我在mat-option-list css中使用display:grid ，而我想使用mat-grid或grid-list屬性將它們顯示為grid。

<input matInput class="form-control input" [(ngModel)]="userTextvalue"matAutocomplete]="auto">
  <mat-autocomplete class="user-autocomplete" #auto="matAutocomplete">
    <mat-option-list *ngFor="let user of filteredUsers" [value]="user.name">
        <span class="username">{{user.name}}</span>
        <span class="usercode">{{user.code}}</span>
      </mat-option>
  </mat-autocomplete>

scss：

.mat-option-text {
  line-height: normal;
  display: grid;
}

[

Answer 1

為什么不將所有包裝都包裹在包裝紙中？

   <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        <div class="wrapper">
          <span>{{option}}</span>
          <span>{{option}}</span>
        </div>
      </mat-option>
    </mat-autocomplete>

您的.css就像

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

見stackblitz