Grid images fine in design mode but empty space in preview and live


I’ve created a grid layout on my home page of 4 images. When I am in design mode. It is formatted how I need it to be.

When looking at it in preview mode there is an empty space between the 2 columns (no empty space in the rows) the images are currently set to responsive.

any help or suggestions on formatting would be fab!


Here is my site Read-Only: Webflow - Chelmsford Circle


First off, I highly recommend you use the same classes for each item in the grid, give them all a class such as “grid_item” rather than container 34, container 36 etc. Just to make things easy!

Then its simply a matter of setting the width of the container, link item, image and divs to be 100% so it fills up the entire space (don’t forget to make the image set to cover.) This is where the same classes come in handy so you don’t need to make the same change 16 times. You may also need to increase the max-width of those containers, or set them to have no max width!

Let me know if you need some help, I’m happy to make a quick loom vid!