I chose the Grid for the gallery layout, but it turned out to be display: flex; when I inspected the source. I thought it was display: grid.
If it’s gonna be display: flex;, I noticed no gap option. If I add the gap value to H.Gutter there, it will expand the entire gallery layout width, which causes an overflow issue.
I know I can just set overflow: hidden to the section, but I think row-gap and column gap will work better for the gallery instead of using H:Gutter.
Because the images in it are pushing the gap on the right including the last item(3rd item), even though I noticed there has such CSS value, it doesn’t seem to work. Is it a bug?
From my perspective, everything works as it should.
Maybe there is a misconception in how the block works?
Your screenshots reflect the correct behavior as far as I am aware.
I might miss your point though.
Just checked on my end and everything behaves as intended for me.
But I get your point with the wording (grid/flex).
It does not represent the CCS values, but the actual visual appearance.
I agree. As I said, if it’s using display:flex, I think having the gap option is ideal. So it only applies to the inner space instead of pushing the space to the right.
I noticed that the CSS property 100%/3 - 50px on the front end. But it didn’t do the work as it should. So, I’m not sure if it’s a bug for me. Hehe
I thought the exact same, all is working perfect and centered, but when resizing window after, I noticed that there was a horizontal overflow to hide. I did not hide it or checked further.
It does but not quite, maybe. Refer to the 3rd and 4th screenshots, and then you will know.
As seen in the 3rd screenshot, you will see that there is also a space on the right at the 3rd item. Screenshot number 4 shows the actual layout width. If I don’t set the overflow: hidden to the section, the space on the right will cause an overflow issue when I squeeze my browser.
Not sure about this. Have to wait to see what Louis says about this.
First of all, the Gallery block is one of our older blocks that hasn’t received a proper update in some time. There are quite a few points/hacks that I would address very differently nowadays. The Gallery block will receive a proper update in time where “modern” CSS will be put to proper use.
In the meantime, your frontend looks to be doing exactly what it should. While you may see that overflow on the gallery element, it is corrected by the -50px margin property.
As for the backend scrollbar issue, I’m intrigued as I can’t seem to reproduce it on my side when using the Gallery block. If you remove it, is the overflow/scrollbar removed?
Yes. The margin-right:-50px does the job as it should. Anyway, if I don’t set overflow:hidden for the section, there will have an overflow issue when I squeeze the screen size(frontend) because of the space on the right at the 3rd item.
To reproduce it, try setting a wide layout width. I set mine at 1630px max width(I use 24" monitor). And, yes. The overflow/scrollbar disappears after removing the value from H.Gutter.
