Gaps around Images & Spacing

[laveritalondon (Robbie L)]

Hello Webflow Crew,

I am doing a small site for a client and for some reason I cant get the gaps under the images in the gallery to go away. I have no margins, or padding yet there appears to be spaces. What am I doing wrong.

What I want is the images to full the screen, edge to edge, sit next to each other with no gaps. I have created divs, and used the dynamic library to pull in background images with a link around them to link to the individual project page. But they are just not behaving. What am I doing wrong?

Thank you so much!

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

Wrong way to build very simple layout (Add your own styles only for special Un-Even Layouts and ideas like this).

First, you can use Webflow CMS Build in Collection list settings (3 cols).

Tutorial

I think the best solution is to follow the steps her (Same layout 2-3 minutes of work):

“THE GAP”:

In your case you set manually the width of each Collection-item - to 300px Width. 3 images in a row (3x300 = 900px) - but the container W is greater > 900

[Siton_Systems (Ezra Siton)]

The btn in your case is 100% height/width (Not like the youtube example).

Set the parent to “position: relatve;” than Try this and you get full area btn:

Read more on google (The name of this trick/idea is Overlay)

CSS Overlay: How to Create a Simple CSS Overlay

How to overlay one div over another div

[laveritalondon (Robbie L)]

You legend! THANK YOU SO MUCH!

[laveritalondon (Robbie L)]

Thanks, annoyingly I still have not got it right. I think I almost have it but there seems to be gaps in the grid for some reason?