Am I being thick? CSS Grid issues

HTML-CSS
1

I am just not getting css grid. I have read countless articles and watched videos of people doing this simply so where am I going wrong? All I want to do is have a basic page. Header across the top images down both sides some text in the middle then footer accross the bottom… using grid.
The reason I want to use grid is to then change it for mobile friendly approach.

Every time I use grid-template-areas it does nothing for me, yet on every video I watch that is what they use. Please can someone help show me what I’m doing wrong because Im going insane. This is the link to my pen.

2

Well there are a couple things that pop out to me.
But i think your main issue is:
You gave your body an id of main, and then said that main should be in the header area of the grid.
Problem is you just put you’re entire page into the “header” section of the grid, because the body is your whole page. I think thats you’re main issue.

Hope that makes sense.
-Nao

3

I think I get what your saying, and thanks for the reply. But would that actually make a difference. Because my understanding of it is (and please correct me if im wrong) that it shouldnt matter where it is in the mark up. If your using the grid and selecting the element to be placed in that particular place then it should sit there.

4

I think you’re right but the problem isn’t where it is in the markup. The problem is that instead of putting some of your code in the header and the images in the images. since you’re images and everything else is in your body, which you’re calling #main . You’ve told your CSS that #main is your header. Therefore it is going to put your whole body into your header in the grid.
It can’t put the images into your image spots on the grid because the #main is superseding the priority of what your images belong to.
If you were to do this instead i think it would work:

<div id="image">
</div>
<div id="main>
<h2>.....</h2>
<p>....</p>
</div>
<div id="image>
</div>

That should work even though they’re in completely different orders, but its because the #images aren’t inside the #main. that make sense?

5

Actually, yes that does. Thanks will give it a go tomorrow. Thanks for your help. Fingers crossed this will work.

6

Sounds good. Glad it helped.

Let us know how it goes when you try it out :slight_smile:

  • Nao