Image inside of grid overflow

Design help General
1

Hi – I created a grid and want to place an image inside of each square to create what is essentially a wall of thumbnails. I’m having trouble getting the images to fit nicely inside of each square without overflowing into the next.

When I add the image element to the grid it fits perfectly, then as soon as I upload my own photos, it scales ever so sightly outside of the box. I’ve included screenshots. I’ve tried adjusting width and height % as well as adding a div to each to try and set the overflow to hidden. None of that seems to work. Is there something I’m missing all together?

Here is something like what I’m trying to achieve:

22%20PM
22%20PM1334×1360 437 KB

And here is what’s happening: You can see that the two images I’ve uploaded are now touching the row below. I’m not a developer, I’m more of a designer, so I’m sure its an easy fix, just not sure what it is.

08%20PM
08%20PM1126×1306 79.9 KB

Here is my site Read-Only: https://preview.webflow.com/preview/hanks-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=hanks-portfolio&preview=1208bd09ffbe481b62cd4da9c8a50051&mode=preview
(how to share your site Read-Only link)

2

Hi knicoleco

Welcome to the forum :slight_smile:

I also consider myself as a designer - not A coder, feel comfortable, your are in the right place.
I’ve checked your read only link (need to copy and paste the link in my browser since the link is not clickable) and it doesn’t look the same as your screen shot.

My advice to you, do not give up, go to Webflow University watch and read their tutorial on the grid topic - and if you have more questions feel free to ask - the community loves questions.

About your issue - I would use background image for the dives you placed in the grid.

1 Like