Possible bug in a lesson!

I wouldn’t say it isn’t rendering correctly. It’s just that none of the elements are being placed using grid-area so the grid-template-areas does not have an effect on any of the elements. As stated, the challenge that comes next starts to place the grid items.

Not sure why the challenge was set up like it is because even if you did place them it doesn’t make much sense. The numbers of columns and the number of element combined with the names header, advent, content, and footer, does not seem to give a sensible grid.

I guess maybe the challenge should be updated I’m just not sure how best to do it. The mention of the empty grid cell syntax . seems a bit unnecessary and the challenge should let the camper know that the changes they make does not have an effect yet but that the following challenge will show how to use the grid-template-areas that was set up in the current challenge. I’d have to think about it for a bit.

4 Likes

I agree that it would be nice for the students to see what the effect of their code is. Perhaps something like

<style>
  .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"
      "advert footer footer";
    /* Only change code above this line */
  }

  .item1{
    background: LightSkyBlue;
    grid-area: header;
  }
  .item2{
    background: LightSalmon;
    grid-area: content;
  }
  .item3{
    background: PaleTurquoise;
    grid-area: advert;
  }
  .item4{
    background: LightPink;
    grid-area: footer;
  }
</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>

That way when its changed to

<style>
  .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"
      "advert footer footer";
    /* Only change code above this line */
  }

  .item1{
    background: LightSkyBlue;
    grid-area: header;
  }
  .item2{
    background: LightSalmon;
    grid-area: content;
  }
  .item3{
    background: PaleTurquoise;
    grid-area: advert;
  }
  .item4{
    background: LightPink;
    grid-area: footer;
  }
</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>

the effect is clear.

I think that if we want to show the effect, we should have the container class higher so that’s what the students focus on sooner and we shouldn’t have items not mapped to a grid area.

But this disrupts the lesson flow when this concept is used before it’s explained. Both in there feels like a lot in one lesson, which is why I’d guess that it was broken up.

We can’t really introduce grid-area in the CSS for this challenge because that would be new unexplained syntax and is what the next challenge introduces.

I think the easiest solution is simply to explain that it has no effect just yet and that the next challenge will show how to use the grid-template-areas.

Personally I would prefer moving the empty cell syntax to a different challenge and just have the main point of the challenge be to have the camper write the grid-template-areas string using the example code as a guide. But that will require changes to the text, the test, and the video, which is more work then it’s worth, to be honest.

I can open an issue and see what people have to say.

Edit: done issue