Help with grid-spacing

[TylerCourts]

Hey all!

I am working on a website right now and I am struggling a bit with the spacing of my blog section. I want to ensure a max-height is maintained on all the feature images, but doing so makes the spacing weird on all of my collection items. Is it possible for me to maintain a 25 px gap between each item, even if it means that it isn’t a “formal” grid, per say.

Basically, looking at the screenshot above, I want to be able to remove the gap that is created by the red shaded area that I have circled.

Thanks!

---

Here is my site Read-Only: https://preview.webflow.com/preview/spection?utm_medium=preview_link&utm_source=designer&utm_content=spection&preview=23b035b81cf48968e601fd9347ed2877&pageId=5eb792b5631a1e6358153531&mode=preview

[DFink (Dave)]

I’d suggest instead of trying to do that, to set your image as a background to a div set with a fixed height. That way your images are all the same height. See if that solves the issue.

This is just my opinion but I’d also recommend removing all the scale hovers on your site. it’s very hard to use and really cumbersome to navigate.

[Christopher_Nelson]

Hey I’m pretty new myself, and ran into a similar issue. Try adding flexbox to your individual grid items, and maybe try setting some min/max heights on imges. This is what I didi and I got the result that I wanted.

It was this

Its now this

Not perfect but good enough for now.