Masonry layout: the gap for masonry layout should be applied to inner gap only

[jornes]

Hi!
I am creating a section to display some ACF images. The images are in different sizes. So, I used a masonry layout for it. I noticed that the gap is not applied to the inner only, but it’s on the right of all the items, which is unpleasant because it makes the layout looks unbalanced as it would look bigger space on the right. I want it to fit the layout width completely.

Refer to the screenshot below; you will notice that the space on the left and right are not the same.

I see there is a width: calc(100% / 4 - 20px) that should do the trick, but it didn’t.

What do you think?

[Marius]

Seems like there is no negative margin-right applied on the Query Template block, which matches the value of the masonry’s “column-gap”.

Just checked that on my installation and can confirm that issue.
I think it behaves the same or in a similar way like the Gallery block.

Louis already mentioned that it will be updated to “modern” CSS.
Hopefully, it will also cover the masonry layout with the Query Template block.

As a temporary fix, you can just add the negative margin to the Query Template block itself.

[jornes]

Thank you for confirming this and the suggested fix, @Marius

I am using this solution for the time being until the team fixes it.

[Marius]

Glad it’s working out for you @jornes.
Maybe you want to move the topic to bugs, so the team is aware of the situation.

[Louis]

Thanks @jornes and @Marius for confirming this issue.
Moved to Bugs and will be working on a fix as soon as possible.

Cheers,

[Louis]

Hi @jornes,

Thanks for your patience on this one. We have now implemented CSS Grid as the display property for the Gallery block as well as masonry elements in 1.2.9.4.3.

If you encounter any issues related to this change, I’d be grateful if you could let me know by replying to this thread.

Cheers,

[jornes]

Thank you, @Louis !

I just checked and it works as expected.