css - ion-col 没有得到高度和宽度

Question

<ion-grid>
    <ion-row >
        <ion-col size="4" *ngFor="let item of items"  >
            <div id="main-item-container" class="main-item-container ion-activatable ripple-parent">
                
                <div class="clock" >
                    <ng-container *ngIf="item.hasClock">
                        <ion-icon  [src]='item.clock'></ion-icon>
                    </ng-container>
                </div>
                <div class="item-picture-container">
                   <ion-img [src]="item.img"></ion-img> 
                  </div>
                <div class="item-name-container">
                    <ion-label>{{item.name}}</ion-label>
                </div>
                <ion-ripple-effect></ion-ripple-effect>
            </div>
        </ion-col>
    </ion-row>
</ion-grid>

请关注粉红色的部分，因为你可以看到 ion-col 溢出了粉红色的 div。我希望所有项目都在其中并相应地设置高度宽度，它们不应该溢出父项，每行包含 3 个项目，应该有 5 行这是目标。