I successfully completed the following challenge: https://www.freecodecamp.org/learn/responsive-web-design/css-grid/divide-the-grid-into-an-area-template
I did simply by replacing the word “advert” by a “.” in the grid-template-areas property.
However the displayed result is not what I was expecting: I was expecting an empty space at the first column of the second row but it’s taken by the div number 4 instead.
Could someone explain please?
You are absolutely right! It does not do what it was meant to do.
I believe the starter code should look like this.
Try it with the code below.
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
"header header header"
"advert content content"
"footer footer footer";
/* Only change code above this line */
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.