Layout problem with slides containing lists

Ionic Framework ionic-v3
1

I’m quite new to ionic 2 and trying to create a simple shopping list app to get the hang of it.

Here I’m stuck on a layout issue: I’m using the tabbed layout and the shopping list tab is offering slides to scroll through the various shopping lists. The shopping lists and their items are being displayed, but they are vertically centered in a very strange and ugly way. What am I doing wrong?

<ion-header>
  <ion-navbar>
    <ion-title>
      Shopping list
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-slides pager>
    <ion-slide *ngFor="let shoppinglist of shoppinglists">
      <ion-list>
        <ion-list-header><h2>{{ shoppinglist.name }}</h2></ion-list-header>
        <ion-item *ngFor="let item of shoppinglist.items">
          <ion-label>{{ item.product.name }}</ion-label>
          <ion-checkbox color="blue" [(ngModel)]="item.bought"></ion-checkbox>
          <ion-badge item-right>{{ item.amount }}</ion-badge>
        </ion-item>
      </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>
2

instead of list try with the grid