In the lesson in the link “grid-template-areas” is not rendering properly.
Please share your code. Remember to use the </> button or put backticks ``` on new lines before and after your code.
Welcome, Majnuel.
Please elaborate on what is not rendering. Is a section of the page missing? Could you link a screenshot?
Also, please include your browser and version.
Hi! Nor chrome, safari, edge or firefox will render the grid in the proper way. All latest versions.
Please copy and paste your code into a forum post, using the </> button or adding backticks ``` on new lines before and after your code. Just pasting an image makes it hard for us to see what’s going on.
Jeremy, its not my code, its the excercise´s default code thats not rendering. If you hit ´reset all code´ the grid will still not render the way the code is written before you do what you are asked to do. Furthermore, when you do the exercise the right way, it´ll tell you you nailed it and it doesn’t do what its supposed to do. Try it yourself.
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
/* Only change code below this line */
"header header header"
"advert content content"
"footer footer footer";
/* Only change code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
Thank you for providing the code you are using. I can now start troubleshooting.
I hope it helps, but again. Its not my code, its freecodecamp´s code.
I see five items in the container.
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
Were you expecting there to be more, or arranged differently somehow?
Use my snapshot. You need to look at the instructions and then at the actual grid. It says the code written should display merged cells, for example: the 3 top cells should be merged into one big header. Instead, 5 cells are shown in the grid. What´s not being rendered is the grid-template-areas. Lines 17 to 21 .
They should be arranged in the way grid-template-areas is telling it to arrange them
Those three cells are merged into a grid area. The next lesson describes what you can do with a grid area. A grid area is not for visually merging multiple cells into a single cell. A grid area is for logically grouping multiple cells into one grid area.
Not merged, they should be spanned. Did you do the exercise ? Were you able to tell that it doesnt do what its supposed to do?
As far as I can tell, they are functioning correctly. There is a logical grouping of those cells known as a grid area. Did you continue on the curriculum to see how to make use of those grid areas?
Yes, i did this exercise months ago actually and marked it down cause I knew there was something funky going on. Tried it 3 computers, 4 different browsers. When you put down the . where advert is: nothing happens.
Further confirmation is those lines showing in black fonts. They are not being read by the browser thus not rendering properly.
As i said, the top row should be a 3 column span with the same background.
I dont mean to argue, but if you take the time to analyze it you´ll realize. I´ve had to do many grid exercises in other curriculums now. That´s how i know there is something wrong here.
Could you please draw a picture of what you expect the output to look like? It looks fine to me.
Cells should look like this.
This is what grid-template-areas are for, to avoid using numbers for rows and columns in spanning sections across cells.
Is advert becoming an empty cell when you put replace it with . they way you are asked to do it? No, right? It will never work because its not rendering the grid-template-areas
Please read the thread, this is the right fix for the default code in the exercise.
Hope this contributes to solving the problem
How to do that is covered in the next lesson (like I said above):