Grid : use grid-area

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**


.item5 {
  background: PaleGreen;
  /* Only change code below this line */

  grid-area: 3/1/5/5
  /* 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;

<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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36.

Challenge: Use grid-area Without Creating an Areas Template

Link to the challenge:

HI @juanjosegiraldosalin !

Welcome to the forum!

The last two numbers of your grid area are incorrect.
You are also missing a semicolon at the end.

Here is the FCC example again

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

First part of the instructions:
between the third and fourth horizontal lines
You wrote 3 and 5.

Second part of the instructions:
between the first and fourth vertical lines.

You wrote 1 and 5.

Once you fix those last two numbers and add the semicolon it should pass.

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