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

Question

我在mat-option的两行中分别显示了name和id，我在mat-option-list css中使用display:grid，而我想使用mat-grid或grid-list属性显示他们在网格中。

<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