CSS Grid: Divide the Grid Into an Area Template

HTML-CSS
1

Tell us what’s happening:

I know I’ve put the right code in but it won’t let me go on to the next lesson

Your code so far
“header header header”
“. content content”
“footer footer footer”;


<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"
    ". 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>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36.

Challenge: Divide the Grid Into an Area Template

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/divide-the-grid-into-an-area-template

1 Like
2

Not sure why but you have to get rid of the comments. Seems like something may have broken with this challenge test.

3 Likes
3

Thank you! This solved the problem. Agreed, I think this test is broken.

2 Likes
4

I think I figured out why it’s broken (maybe?).

If you move the first comment up, outside of the grid-template-areas statement, the code will run correctly.

1 Like
5

Having the exact same problem and was about to post a thread on it until I found your post.
Removing the top comment worked perfectly.
Thanks everyone!

1 Like
6

I found the PR that is causing this test to fail now. We just need to figure out the right solution (move the comment back or fix the regex).

Just an FYI, the master branch is frozen right now.

1 Like