I am having a similar issue as eeblanc and a previous user.
On first load the images don’t display in the order I set the in the grid, but if I re-size the browser window then the images re-arrange themselves according to the grid set, and they stay in the correct order even when I maximise the browser window again.
I have taken made the following screenshots for you: Custom grid on front website; before re-sizing browser window, and after re-sizing browser window. And a screenshot of how I have it set up at the backend.
It’s like the image sizes are not quite correct at first, but then when I re-size the browser window, doesn’t matter whether it’s to smaller or larger or whether I size it back to the size it first was, the images stay in the correct order after that.
The images will also re-arrange themselves in the correct order if I open dev tools, like inspect element.