Uneven grid content (gaps)

So I’ve been having an issue where a grid of dynamic content isn’t filling in properly– there’s gaps where different rows in the grid will only have 1 image. The issue is very intermittent, which has been making it very hard to fix. I’ve seen posts about a similar issue stemming how/when height of the grid content is calculated, but I thought I had taken care of that with height:auto, width 100% and display:inline-block. I feel like I’ve exhausted all options that I’m aware of, so any help is greatly appreciated.

Live site here

Hi Jon,

Can you share a read only link?

Unfortunately I have a ton of confidential stuff I have hanging around some unpublished pages, so I’d prefer not to– is there any way you might be able to help via inspecting the site? I understand thats probably not as easy, my apologies.

So maybe I’m missing something, but on first glance your parent element is using display: flex, not grid:

image

The the direct child of that parent is using a bunch of grid properties that don’t do anything since the parent isn’t set to grid:

image

Unchecking all of these in inspector does not do anything to the layout.

Then the children of that element (the actual grid elements) appear to be just built-in Webflow columns:

image

To me it looks like you’re mixing a bunch of different display methods, possible resulting in these layout issues, although I’m no able to reproduce the issue in Chrome.

Thanks for taking a look at this. There’s a lot of remnant styles as a results of my unfortunate ‘guess and check’ approach to development (as a designer first, developer 500th). I’ll definitely try cleaning up some of those styles to see if that helps– never a bad idea and might resolve some weird conflicts. I have come to see that there’s something causing issues with the offset grid and using float:right to make it work… but havent sorted out what a solve cold be just yet.

Thanks again.

@jonway another issue could be that you are relying on fixed widths instead of using the new Auto-fit feature and dense properties within Grid.

Without see your actual grid settings, we are limited to what you are doing wrong. Maybe make some screen grabs of just that page and showing us?