Preventing last row in flexbox to fill width?

I’m using a series of collection items to display a series of thumbs filling the width of a site. Using flex grow I display 3 wide and it breaks down to mobile really elegantly. The only problem is that I have 8 items in my grid and the last row has 2 items that fill the width completely, breaking the grid.

I’ve looked for solutions online and it seems a popular one is inserting a 0 height item on the last row to fill the gap, thus pushing the other items to the left.

How would I do this using a collection item? Here is what I mean: on the left is the current layout, the right is the desired layout.


You mind sharing your preview link please?