Hello! 
I need help with my grid, I’ve been struggling with it for ages! I finally got the animation working how I want it (when you hover then the images are replaced by new ones) and now my problem is responsiveness.
So I have a div with 4 different images inside it on each grid square, which animate to show once hovered on the correct square. I’ve set the div container to relative and the images inside to absolute so that they are all in the same space. This would be fine, except that I have another row under it. First it was taking up the same space as the row above, so I figured out that I need to set a value to the squares in order for my 2 rows to be visible.
I want my rows and colums to take up the whole space and have a nice even 10px in between them The only way I could figure out how to resolve my issue is to set a pixel value, I can’t seem to make viewport widths or heights or anything work. I really don’t like this solution visually. It’s not very responsive. Any insight?
PS. I noticed that with an animation on a read only link, you need to click preview a couple times before it works…
Here is my site Read-Only: https://preview.webflow.com/preview/test-cf2569?utm_medium=preview_link&utm_source=dashboard&utm_content=test-cf2569&preview=0b5e87f673737ec39ac7305c7f024ea2&mode=preview
I took my idea a little further and added more squares. It’s almost the same but nothing I do works to make it responsive. The only way to make it work is to set the pixel value, and then it is not responsive. Same issue I had earlier