The Grid squashed up on homepage

Hi there,

When I load my homepage on I keep getting this problem whereby The Grid items towards the bottom of the page will sometimes get squashed up into one another and sometimes even get caught under the footer.

I have attached the link to a screencast to illustrate what I mean:

I am using an 11inch Mac, but I have also had this problem on other computer types and sizes

Do you know what I can do to sort this out?

Thank you!

Hello There,

Thanks for writing in! At the moment, the grid is loading the full images which could take several seconds because these full images were quite bigger in file size. Please edit your grid and use the medium size images instead. This would enable the grid to load fast and the grid items could align more easily upon loading the items.

Hope this helps. Please let us know how it goes.

Hi Rue,

I can’t really reduce the file size any more than I have as it will reduce the quality of the images, especially when they are larger on tablet mode (in any case, they are only about 50kb each).

I actually created a second grid with tiny size images -about 5kb each -just to check though and I was still getting the same problem, so it doesn’t look like it is being caused by the size.

Do you know what else might be causing this problem?

Thank you,

Hi there,

Have you tried the image preloader? The grid has that feature under Load/Ajax section. That should preload the image, try it both on and off when you test.


Hi Rad,

I tested it both with the image preloader on and off but unfortunately I still got the same result.


Hi there,

In that case, please provide your login credentials in a secure note. Then I’ll check it too :slight_smile:


Ok, Rad. Here they are

Hi EW,

Grid settings > Force Item Size is set to ON. This should make all you grid size same height. If this settings will work, the space is correct and it doesn’t seem squashed. Can you try to clear cache and then check again. See this:
Let’s check again after.

Hi Lely,

I tried what you suggested, forcing the item size on (making sure to delete the cache each time), but unfortunately it didn’t affect the result at all - still the same random squashing - and the items weren’t even the same size as they appeared in your video…


Hi again,

I checked your site and I see you’re using WP Rocket. The problem with Rocket loader is the way it loads the files. It will load them asynchronously disregarding the correct loading order. For example, the libraries should be loaded first before a script. But the script is randomly loaded before the library since it’s asynchronous. And that breaks the script since the library is only loaded last, please see

It’s a good way in optimization. But there is always a downside, especially that WordPress are set of theme and plugins that are dependent on different libraries or scripts. And they should be loaded in correct order. You should try disabling it for a while after clearing it’s cache and see if this resolves the issue.

Let us know how this goes!

Hi Nabeel,

Apologies for the very late response.

I did eventually manage to solve the problem. I went on the edit page section in the main wordpress admin area and turned off ‘Lazy Load for Images’ under the Cache options (I’m not sure if this is related to WP Rocket or is just a general Wordpress setting).

This has stopped The Grid from squashing up in the way that I described earlier. However, the side effect is that the page loads quite a bit slower than before as there are a lot of images on my home page and this setting, presumably, turns off image lazy loading for all of the images on the page.

Ideally, I would like Lazy Loading to be on for all images on this page except those images that are produced by The Grid. Do you know how I can achieve this?

Thank you,

Hey Ew,

Excluding some images from lazy loader might not be possible but you should check out to improve your site’s performance.

Hope this helps!