Element in grid moves when in preview

I am designing a mock website, and i want a background stripe and text in the middle, and an image overlaying on the right. I made a grid with 5 rows and 2 columns; and placed the stripe on the 3rd row, but when i go into preview, it drops to the bottom. If i place any element in row 4&5 it doesn’t drop. Is there something i’m missing here?


Here is my site Read-Only:

https://preview.webflow.com/preview/client-first-cloneable-19926e?utm_medium=preview_link&utm_source=designer&utm_content=client-first-cloneable-19926e&preview=8071c58d70eecbee9aa928bb0d2f9f86&workflow=preview

hi @nicomallourides the grid behaves as it should. The rows 4 and 5 have set height: auto and while there is no content their height is actually 0. If you give these rows specific height as you have for rows 1 and 2 all will work as expected.

The visual feedback WF provides is only imaginary to be able to see there is something. You can see an identical behaviour eg. with div elements. They have in WF some height set to be able to see the element but its height is 0.

It can be for you beneficial to get some CSS tutorial to learn some basics how things works :wink: