Grid Problem With Breakpoints

Hey Folks,

Struggling with the grid system. Basically I have a simple col grid, using col-lg-3 tag as a breakpoint. However, there seems to be something wrong as there are points where the items start taking on variable widths, somewhat inconsistently.

See the gif for a demo of what I mean…
Screens1

Code:

<ion-grid>
    <ion-row class="col-container">
      <ion-col *ngFor="let recipe of recipes$ | async" col-lg-3>
        <ion-card (click)="viewRecipe(recipe)">
          <div class="image-holder">
            <img [src]="recipe.image?.downloadURL" />
          </div>
          <ion-card-content>
            <ion-card-title text-center>
              {{recipe.recipeName}}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>