Masonry grid resizing issue

Hi all,

I’m redesigning a portfolio and I’m opting for a masonry style grid. The issue is that somehow the number of the items in the grid changes the size of the artist logo in the nav section. On the page ‘illustration’ the logo is slightly bigger than on other pages. What’s causing this?

When I set the grid using flexbox this issue does not occur.

https://anonniks.webflow.io/

https://preview.webflow.com/preview/anonniks?utm_medium=preview_link&utm_source=designer&utm_content=anonniks&preview=00bedb802b68c4cfeb166998cfb5bc42&pageId=653920e4d2851b61971e58c3&workflow=preview

Hi Alistair,

On my browser I’m not seeing the logo resize but your entire nav pane width is changing. My guess is that when you have a lot of content in the gallery, that area slightly exceeds 80% width, and compresses the nav pane.

You might try this to see if the nav behaves more closely to what you want.
Failing that, I’d try fixed widths, or stronger max-width controls on the content area to ensure the content doesn’t impinge on your nav.

Hi Michael,

Thanks for the suggestions! Somehow this issue still persisted, even with a fixed item/wrapper width or by making the cms wrapper smaller so it couldn’t affect the nav bar.

I opened the link in Firefox instead of Chrome (which I normally use) and the issue didn’t occur. I’m a bit frustrated with this, but I guess I’ll leave it for now.

There are a lot of other things you can try-

  • switch to a 2 col grid, and make col1 a fixed width, col 2 1fr
  • Wrap your nav in a DIV that you assign a fixed width to, also min and max widths

Browsers can be difficult to predict particularly when you ask them to layout things that mix layout paradigms, box model, float, flex, grid… they all work on different principles.