Elements not being allocated to grid-areas

HTML-CSS
1

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?

Codepen: https://codepen.io/ibra-wiz/pen/BaoyMMW?editors=1100

Much appreciated

2

Hi @ibrahim_aq,

Thanks for posting this. I´ve read about grid-areas, but haven´t yet dared to test it out in a project :wink:

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.

3

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!