Hi Everyone, I’ve been stuck on this for hours. I’ve been working on my product landing page and have been trying to implement a grid style layout. At the moment I am only drafting the grid and trying to allocate the elements to the correct grid-area.
The planned layout is as follows:
- a fixed header all the way across the top
- a grid below the header to contain all other elements of the page including footer.
- grid to consist of 3 columns (the centre column is the largest and is where the main content goes in.
I have used the grid-template-columns and the grid-template-areas to lay things out. However the elements are not being allocated to the correct grid-area (except for footer - don’t know why). I believe the elements are trying to all fit into the first column… I tried to fit in rows using grid-template-rows but even that didn’t work.
Am I missing out an a line of code or something?
Thanks for posting this. I´ve read about grid-areas, but haven´t yet dared to test it out in a project
I think the main reason it´s not working the way you want it to is because you have inserted too many divs and sections inside the main “grid-container” div. All direct children of the “grid-container” div will follow the grid-template-areas you set up. However, once you insert layers upon layers of divs and sections, the grandchildren (and even deeper “children”) of “grid-container” will not listen to the setup you made. Only direct children elements of the “grid-container” parent div will work the way I assume you attempted. I hope that makes sense?
To clarify, look at the setup in the FCC curriculum. Notice “item1”, “item2” and so on all are direct children of the “container” div?
I had a go at your code, and made this simplified version. As you can see I got rid of all the divs and sections, and just inserted classes for a lot of p tags. I hope this helps.
Hello… Thank you for the feedback and yes I had a look at your version of the code and I do understand your reasons. I did give up on it eventually because I found it not useful to set up grids with limited containers. I worked with flex boxes instead - which is not very customiseable as I thought they would be, but it did the job!