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.
