Html 如何让一个动态列表以网格方式水平显示

我想水平显示卡片的动态列表.大的将是每一行3乘3，然后在小屏幕中，它将是完整的列12.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

. Each list item still is vertical and not horizontal

 <ion-grid> 
  <ion-list class="ion-padding-top">
    @for (item of myList; track item.userId)
     {
       <ion-row>
         <ion-card class="col-4">
           <ion-avatar>
            <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
           </ion-avatar>
           <ion-card-header>
            <ion-card-title>Card Title</ion-card-title>
            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
           </ion-card-header>
        
           <ion-card-content>
            Here's a small text description for the card content. Nothing more, nothing less.
           </ion-card-content>
         </ion-card>
        </ion-row> 
     }    
    }
  </ion-list>
</ion-grid>