Fit last item in grid to same space as others [CSS]

Now that I understand a bit better, I don’t think you really need grid, because you really have a one-dimensional layout. There is a companion guide to flexbox, and the crucial property here is flex-wrap. Something like this (you can play around with the width property of .basket to fit your situation, but I’m assuming you have a sense of how wide a single cell needs to be - this ordinarily is independent of the layout). I used 13 items here so as to have your problematic straggler in virtually all window widths:

 fruits = ["apple", "banana", "cherry", "durian",
    "elderberry", "fig", "grape", "honeydew",
    "jackfruit", "kiwi", "lemon", "mango",
    "nectarine"];

<ion-content>
  <div class="shelf">
    <div class="basket" *ngFor="let fruit of fruits">
      <div class="fruit">{{fruit}}</div>
    </div>
  </div>
</ion-content>

.shelf {
  display: flex;
  flex-wrap: wrap;
}

.basket {
  width: 200px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dotted green;
  margin: 12px;
}

.fruit {
  background-color: #f0afec;
  color: black;
}

The margin setting determines the spacing between cells - if you want, you can break it out into margin-left, margin-top, etc to give more or less horizontal versus vertical padding.

So with the values I gave here, I see four cells per row at >900px window width, dropping to three per row under that, two per row at around 670px, and finally one per row at around 470px.