Elements in grid have different spacing. Shouldnt it be the same layout if its in a grid?

Design help Layout & Design
1

Hi everyone,

I am trying to get the elements in my grid to have the same spacing. I have a column in the grid that seems to be confusing the spacing, and I’m not sure how to fix it. Any advice would be greatly appreciated!

In the screenshot, you can see the spacing between the small image and the heading are not consistent on all the cards:

image
image1920×1219 198 KB

Here is my site Read-Only: (https://preview.webflow.com/preview/yusefulbeta?utm_medium=preview_link&utm_source=designer&utm_content=yusefulbeta&preview=84a9152f1ad5c53d3e50280669f14022&workflow=preview)

2

Hi @DanBaronetti

I see the issue in your screenshot but checking out the preview site it all looks good now. Did you change something?

Something that does stand out is the child structure of the parent div for those 3 elements (image, headline, text block).

You’re switching between block and inline block for those. Maybe some uncertainty is added there.

You can always nest another grid. Make it 2 column, 1 row.

The first column is your image, the second is your headline & text block. The second column could contain block elements so they stack vertically.

You could more easily control spacing between the two grid items. Just a suggestion…

Hope that helps!

(Nice looking site by the way!)