How to complete a Divide the Grid Into an Area Template in CSS?

HTML-CSS
#1

please understand me ,How to do this challenge

  **MY CODE👇👇**


<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 */
  
  /* 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Divide the Grid Into an Area Template

Link to the challenge:

#2

Did you see the part they already filled in for you:

    /* Only change code below this line */
      "header header header"
      "advert content content"
      "advert footer footer";
    /* Only change code above this line */
  }

Change the template so the footer area spans the entire bottom row. Defining the areas won’t have any visual effect right now. Later, you will make an item use an area to see how it works.

hmm… it looks like the header is taking up (spanning across) the whole top row.

Then the advert column takes up some of the content row and the content spans the rest of that middle row.

Finally, the advert column is also taking up some of the footer row and the footer spans the rest of that bottom row.

That code that has the “advert” column taking up part of the footer row, the challenge wants you to modify it so that the footer takes up the whole row.

#3

please show me full solution

Sir is not teling properly ,please tell me a solution of Divide the Grid Into an Area Template
#4 
/* Only change code below this line */
      "header header header"
      "advert content content"
      "advert footer footer";
    /* Only change code above this line */

Instruction: Change the template so the footer area spans the entire bottom row. Defining the areas won’t have any visual effect right now. Later, you will make an item use an area to see how it works.

You just need to change the advert in the last line into footer.

#5

see my code and find my mistake because this code is not submitting

<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"
      "advert footer footer"
      "advert 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>

I am also sharing you a screenshot of my code ,So you can check and find mistake easily

Screenshot (130)
Screenshot (130)1920Ă—1080 342 KB

#6

@ANSHUL_SONI
All you need to do is reset the lesson and change the advert in the last line of the

"header…
"advert…
"advert…
to footer

1 Like
#7

THANKS MY MATE

WE WILL MEET WHEN SOME PROBLEM IS COMING :smiley: :rofl: :joy: :slightly_smiling_face: :upside_down_face: :sweat_smile: :sweat_smile: :sweat_smile:

1 Like
#8

If you just want the solution, there are links to that on the hints page. But I don’t know how you are going to learn anything that way.

That’s why I gave you a hint and not a solution. :wink::grin:

#9

**don’t say like that **

I learn anything in my way ok​:rage::angry::imp:

see my certificate of responsive web design "I have completed my self

Certificate of responsive web design
Certificate of responsive web design1068Ă—825 40.9 KB

#10

  1. Congratulations on getting your certificate

  2. Most of us here on fCC are fellow students just like you, and volunteer our own time and just want to help people. We aren’t employed by fCC, aren’t paid, and aren’t required to do anything.

  3. I think there may be a language barrier and so a misunderstanding, if maybe English is not your native language.

  4. My point was that, in general, if people just want the answer or solution and don’t care about struggling with the problem, learning and growing, then they are being their own worst enemy in regard to learning. Especially in technology, a knowledge worker field, where it is mostly about logical thinking and problem solving.

  5. I am 47yrs old and have worked in IT field for over 20yrs, so I am not just making this up.

  6. The solutions to most of the problems for all of the challenges, for most of the curriculum are plastered all over the internet and these forums. So I don’t understand why you are demanding the solution here and didn’t just look it up.

  7. Getting a lot of these certificates is not always easy. But they are not degrees and are basically a motivational tool to keep people moving forward in their learning.
    Most employers are not going to hire someone based solely on the certificates, although they might enhance one’s resume or CV. I have every certificate/badge from another site’s curriculum and yet, most employers I’ve interviewed with don’t care. They want C.S. degree.

  8. I basically gave you the answer. Just not in the way that you demanded. Yes, this was a very easy challenge. So either there is the language barrier, or you did not care to read and understand my reply. You just wanted someone to do it for you. That’s a wrong attitude towards learning, in my opinion.

  9. This forum is not only for you and me, but other people who may search and read these questions in the future. We do not want to just provide the solution and “spoil” the challenge for others who are struggling with the challenge and just need some hints or a little help understanding what the challenge is asking them to do. A lot of the curriculum on this (and similar) sites are oriented towards self-learning, with some help and support. While the focus is more RTFM (the you can look that up, I won’t explain it here mentality), it is also to provide support and help and guide each other on our learning journey.

  10. No need to rage. Again, I was just trying to help, but without just giving you the answer. Maybe in time, you will reconsider and see what I was trying to say and were I am coming from. I mean no offense to you. Perhaps it does not translate well from English to other languages, so I apologize for that. :peace_symbol: :heart: Sincere peace and best wishes to you.

1 Like