0

I tried to make something out of the grid system (just learned that), but nothing is showing, and my code looks pretty much like my exercice (note quite the same structure / number, but still).

I wanted to make a website who'll get this scheme : "header header" "left right" "right right" "contact contact" "footer footer"

.grid {
  display: grid;
  width: 100%;
  /* height: 1200px; */
  /* position: relative; */
  /* margin: auto; */
  grid-template-areas: "header header" "left right" "right right" "contact contact" "footer footer";
  grid-template-rows: 300px 600px 600px 200px 100px;
  grid-template-columns: 1fr 3fr;
}

#header {
  background-color: burlywood;
  grid-area: header;
}

#left {
  background-color: cadetblue;
  grid-area: left;
}

#right {
  background-color: coral;
  grid-area: right;
}

#contact {
  background-color: cornflowerblue;
  grid-area: contact;
}

#footer {
  background-color: darkcyan;
  grid-area: footer;
}
<div class="grid">
  <div id="header"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="contact"></div>
  <div id="footer"></div>
</div>

EDIT : Copy paste failed, my original code include the "." in ".grid" and changed the mistake i made in the id (tried some things, didn't changed that back), but still the same result.

SarahC
  • 11
  • 2
  • in addition to the duplicate you also have typos in your selectors : `grid` --> `.grid` and some ID are wrong too – Temani Afif Aug 26 '19 at 13:45
  • I don't see how my code isn't good. In the link, it says that my grid should make a rectangle. How doesn't it make one ? There's 5 rows and 2 columns. – SarahC Aug 26 '19 at 13:51
  • draw each grid are alone and you will notice that `right` is not creating a rectangle – Temani Afif Aug 26 '19 at 13:53
  • As @TemaniAfif pointed out, your IDs are wrong in your CSS compared to what you have in your HTML. In your CSS you have `#right` and `#left` - in your html you have `rightmenu` and `leftmenu` – disinfor Aug 26 '19 at 13:53
  • Yeah, changed that back. @TemaniAfif How doesn't it make a rectangle ? – SarahC Aug 26 '19 at 13:55
  • draw it on a paper and you will see, You have 3 `right`, try to put them together and see if you have a rectangle – Temani Afif Aug 26 '19 at 13:56
  • I though it wouldn't merge it with the others, but yeah, i was obiously wrong with that. Thanks. I'll try to make a "leftmenu" "rightmenu" and just "menu" instead of right. EDIT : Just tried and it works. Thanks a lot, the explanation in the link i've got just created more confusion but i'll have to remember that everything that touch together merge together (dunno if you put them far with the same name but won't test that". THANKS YOU EVERYONE ! – SarahC Aug 26 '19 at 14:00

0 Answers0