NO BUG: Masonry layout only applies a vertical gap. Horizontal gap is 0

[maya]

Browser: Chrome 110
OS: Windows.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

I have noticed that on multiple occasions the masonry layout is broken with the horizontal padding not applying at all and being 0.
This happens whether the elements in the grid are blocks or images etc.

[Matej]

Hi @maya,

I can’t replicate the issue with the missing horizontal gap. Can you screenshot the masonry settings, or even better, if you can copy-paste the relevant section here?

Thank you,
Matej

[Matej]

Hi @maya,

we’ve checked your website again, and it seems to be the same issue as in the following topic:

NO BUG: Image Gallery Masonry Layout: No Top/Bottom Spacing

Hi Berndt, Thanks for the login credentials! ACSS is the culprit as it overrides the margins (red). I added a temporary “fix” to Bricks » Settings » Custom CSS (green - maybe there’s some setting in ACSS to exclude certain selector from the defaults): [CleanShot 2025-06-24 at 11.46.19@2x] You should report this to ACSS to get it sorted in the long run. As soon as they @layer their styles, there shouldn’t be any issue anymore.

That’s why I will mark the topic as no-bug.

Best regards,
Matej

[maya]

Hi Matej,

Thanks for the reply. These are the settings:

I have replicated on a site where only Bricks is installed to see if the issue is caused by another plugin. Issue seems to appear when you make each block html tag li. You can clearly see the behaviour with blocks instead of an image gallery, as you can change the tag from div to li:

In the case of a gallery, the ul>>li tags are applied automatically so you can’t change them and the issue persists:

Hope this helps explain things.

Thanks again
Maya

[maya]

And it might be caused by ACSS.
The issue is only when an li tag is applied (this can be blocks as above or an image gallery) but only happens when ACSS is turned on:

When ACSS is turned off Bricks masonry works:

and with ACSS turned on and li removed the issue is gone (li has been removed on all blocks and on the first image):

I am talking to the ACSS team to check.
Thanks

[Matej]

@maya

I am talking to the ACSS team to check.

I think that’s the best. Please let us know what they say.

Best regards,
Matej

[timmse]

@maya

I have replicated on a site where only Bricks is installed to see if the issue is caused by another plugin.

Can you also share the link to this installation? Based on the styles, we could probably see what is going on, as we are unable to reproduce the problem.

[maya]

Hi. Link to the page that shows the issue: zz test – Bricks starter site

and this is a link to a video I sent to the ACSS team: masonry issue.mp4 - Private Seafile

Thanks

[maya]

The only solution I have found working is to use the ACSS classes for masonry and padding and apply css to unset the Bricks default image ratio.

[timmse]

@maya

I have replicated on a site where only Bricks is installed…

@maya

Hi. Link to the page that shows the issue: zz test – Bricks starter site

But this site is using ACSS as well, so the issue is still related to the margin-block: 0, overriding the margin bottom to apply the gap vertically, and the solution is still this:

NO BUG: Masonry layout only applies a vertical gap. Horizontal gap is 0

Hi @maya, we’ve checked your website again, and it seems to be the same issue as in the following topic: That’s why I will mark the topic as no-bug. Best regards, Matej