HTML/CSS gird layout problem,

HTML-CSS
1

So i have been working on the HMTL/CSS project to build a tribute page and i wanted to add some structure to the page. For that i wanted to use grid. When i use the CSS tool: “grid-area:1/2/3/4;” on the grid-container-items, it displays the preview like i want it to look. https://codepen.io/ndohms/full/BvLEdo
But i wanted to use the tool:
"grid-template-areas:
“header header header header”
“left img body right”
“left body body right”
“footer footer footer footer”;
} " like i did in this Codepen: https://codepen.io/ndohms/pen/QzWmoR
There as you can see the whole layout is wrong. I am wondering why that is.

2

Don’t know about the underlying cause, but if you change the first “body” on 2nd row to “img” then it looks like your old layout.

grid-template-areas:
    "header header header header"
    "left img body right"
    "left img body right"
    "footer footer footer footer";
3

Hey thanks for the response. I would really like to “frame” the imgage with text, like this https://codepen.io/ndohms/pen/BvLEdo
and i thought to make it easier to format the text later on i would like to have all the text in the element. And yes i can also just use the version i posted above, but i would really like to understand why the version with the “grid-template-areas:” does not work. :slight_smile:

4

Just did a quick search and it seems this contains the answers you need. Basically what you need to do is restucture your html and css (make grid inside another grid if you want to get that layout) because you can’t name multiple grid areas “body” in this case.

Also, there are some typo in your css, like “tempalte” and “backgorund”

5

Oh the link does indeed contain the answer, but i think it’s about that grid areas have to form a rectangle.
Also thanks for pointing out the typos. :slight_smile: