CSS Grid - Use grid-area Without Creating an Areas Template

HTML-CSS
1

Here is the question it asks: Using the grid-area property, place the element with item5 class between the third and fourth horizontal lines and between the first and fourth vertical lines.

  • But I found the answer needed is the opposite, there is a mistake here I am sure of it. The answer put the item 5 box, spanning horizontal from 1st to forth lines. And the item5 box, spanning vertical from third and 4th lines.

**Your code so far**


```html
<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}

  .item5 {
    background: PaleGreen;
    /* Only change code below this line */
    grid-area: 3/1/4/4;

    /* Only change code above this line */
  }

  .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;
  }
</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53

Challenge: CSS Grid - Use grid-area Without Creating an Areas Template

Link to the challenge:

2

hello and welcome to fcc forum :slight_smile:

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

do you see what’s saying it in here, about grid-area? its talking about “starting and ending line” and not “row”, that’s needs to be understood

and that makes total sense to what “instructions” is aksing you to do for this “step”, if you want to know more abaout “gris-area” consider reading through this mdn article grid-area - CSS: Cascading Style Sheets | MDN happy learning :slight_smile:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.