So I have a section container set to 100VH (my understanding is that this should mean the section is always 100% of the viewport height…maybe im wrong). I then have a grid inside this section.
With 2 rows it appears to stay inside the section, but when I add 3+ rows and start adding content it pushes down passed the section.
Hello,
If your issue is why the elements inside the grid are not placed next to each other, it’s because you’ve assigned the ‘grid-child’ style incorrectly. If you set their positions to ‘auto’, you’ll see that they align next to each other and fill the empty space.
If your problem is that you don’t want the elements to be pushed out of the hero section when new elements are added, this is unavoidable, as the grid structure is such that it moves to the next row when a new element is added.
Again, if I see your desired design, I can assist you better.
Zafre Media Team
Thanks for the reply.
No Im not worried about the placement of each element yet.
My goal is to create the grid that does not need to be scrolled down to be seen. So I want the grid to stay inside the section and the content adjust its height to always stay inside. Does this make sense?
The grid structure works in a way that its height increases automatically when elements are added to it. To address this issue, you can use a flex structure that fully encompasses the height of its parent and does not increase further.
Hi, i can help you. My portfolio and contacts - https://oleksandr-moroz.webflow.io
