Responsive Ionic grid Column based

Question

I am using ionic and trying to build a layout in which cards are organized into 1, 2, or 3 columns based on screen size. Instead of normal horizontal layout, I would like the cards to be laid out vertically like

The HTML I have right now only generates one column of cards and will generate a second or third empty column if the screen size reaches the breakpoints:

<ion-grid>
  <ion-row>
    <ion-col col-12 col-md-6 col-lg-4>
      <ion-card *ngFor="let category of list">
        <ion-label>{{category.title}}</ion-label>
        <p>{{category.text}}</p>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Is there a way with the ionic grid to accomplish this or will I have to use other CSS solutions?