I am trying to create a page layout with square image links grouped in centered rows. I want the images to be non-overlapping and auto-resize with shrinking screen width. For small screen widths the number of images per row must go down in order to keep them readable. I want some empty space to the left and right of the rows of images to adjust the square image sizes to the available screen height.

I am trying to do this by
(1) using a grid of 12 spans, initially at 1024 screen width
(2) adding 4 columns of width 2 spans, each with a left (push) offset of 2 spans. This centers nicely a single row of 4.
(3) At a "small screen" break point I change the width of each column to 4 spans. I expect this to slide the third and fourth column down to the next row, still centering the two columns in each row with the two-span offset. However, what happens is that the third image is pushed halfway off the right edge of the screen in the first row, but the fourth image is shown in a next row -- indeed with a 2-span offset.

So what am I understanding incorrectly here? How can I do what I describe above in RLMP?

Thanks,

Marijn

Can you attach your project file Marijn?