Kevin Powell - Community•2y ago

Issues with Grid Area layout.

I'm currently working on a project for a course through Codecademy. I've set grid areas for a side bar which should only span two rows (according to my template) but for some reason it is spanning 4.

html 
grid-template-columns: 0.5fr 2fr;
    
    grid-template-areas: "header header"
                         "nav about"
                         "nav upcoming"
                         "menu menu"
                         "meet meet"
                         "footer footer";

html 
grid-template-columns: 0.5fr 2fr;
    
    grid-template-areas: "header header"
                         "nav about"
                         "nav upcoming"
                         "menu menu"
                         "meet meet"
                         "footer footer";

Any advice would be greatly appreciated, TIA

4 Replies

Chris Bolson•2y ago

I think that you will need to share some more code. If you could set it up in codepen that would make it easier for somebody to help you.

gpz rider2OP•2y ago

Cheers I will get that sorted now. https://codepen.io/Sean-Poultney/pen/ZEmxYYY let me know if that works as I have never used codepen

Mannix•2y ago

you realize that the grid-area that you set on childrens of main element doesn't actually do anything main element occupies the about area

gpz rider2OP•2y ago

So essentially I need to move the children onto the the same level as main to make it work? that fixed it thank you 🙂

Gaming

Programming

Issues with Grid Area layout.