Streaming live at 10am (PST)

Grid and Stacking/Z-index Issue


#1

I am trying to just stack items in a grid cell but they are not stacking vertically, they are stacking on top of each other. They’re not absolutely positioned. I’m sure I’m missing something super basic but I can’t figure it out. Thanks!

I made this example with 2 200px tall divs that stack on top of each other:

https://preview.webflow.com/preview/play-51dca3?utm_source=play-51dca3&preview=08a10b1b07ac81f75e4139fd0b6f290f


Here is my site Read-Only: https://preview.webflow.com/preview/play-51dca3?utm_source=play-51dca3&preview=08a10b1b07ac81f75e4139fd0b6f290f


#2

Hey @jhiggins,
this behavior is intended. The default behavior in Webflow Grid is not the same display: grid in CSS. The Webflow has some baked in behaviors to position every grid child on set grid cells, unlike the default display: grid that auto places everything on avaliable cells.

This is strange at first, but its part of the building blocks that makes easier for us to Drag and Drop on the Designer.

Another thing that you are missing on the example you linked, is that your grid is just one column and one row, so it’s just one cell. And you are putting the two div blocks on the same cell.


#3

Thanks @gilson. Why is it that when I try to vertically stack two divs in a grid cell they stack on top of each other but when I put in say two H1s they stack normally?


#4

They don’t. If you put to H1s they will stack on top of each other, just like the Divs.