My first ever CSS grid area code seems to not work ,it cherry picks where it wants to work?-CodePudding

so i have a grid area called header ,sidebar,content and side bar and content are next to each other and is defined below, sidebar works but content doesnt.how can i make content look like sidebar. image link below so that my question is more clear

.gridcont {
  display: grid;
  background-color: rgb(172, 115, 68);
  border: 20px white;
  margin: 15px;
  font-size: 20px;
  padding: 20px;
  grid-template-columns: 200px 250px;
  grid-gap: 20px;
  grid-column-gap: 25px;
  grid-template-areas: "header header" "sidebar content" "sidebar content"
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: sidebar;
}

.item3 {}

<body>
  <div >
    <div > grid Item 1 </div>
    <div >grid Item 2 </div>
    <div >grid Item 3</div>
    <div >grid Item 4</div>
    <div >grid Item 5</div>

  </div>
</body>

note that i left item 3 blank cause if i assign content to it it ruins the whole thing. this is what i looks like when it runs https://i.stack.imgur.com/mW93D.png what i want my result to look like:- wanted result

CodePudding user response：

You were almost there. I added a width: 479px margin: 15px auto to center it and deleted column-gap just leaving grid-gap: 30px; since the row and column-gap are very similar on the image provided. Updated grid-template-area: "header header" "sidebar content1" "content2 content2" "footer footer"

As far as the items... .item3 and .item4 just need their own names since they are two different items in the grid .item5 I named footer. I also added the yellow color to them to match the image. I also added some height to each grid item.

.gridcont {
  display: grid;
  width: 479px;
  background-color: rgb(172, 115, 68);
  border: 20px white;
  margin: 15px auto;
  font-size: 20px;
  padding: 20px;
  grid-template-columns: 200px 250px;
  grid-gap: 30px;
  grid-template-areas: 
  "header header" 
  "sidebar content1" 
  "content2 content2"
  "footer footer";
}

.item1 {
  grid-area: header;
  background-color: #ffcc00;
}

.item2 {
  grid-area: sidebar;
  background-color: #ffcc00;
}

.item3 {
  grid-area: content1;
  background-color: #ffcc00;
}

.item4 {
  grid-area: content2;
  background-color: #ffcc00;
}

.item5 {
  grid-area: footer;
  background-color: #ffcc00;
}

.item1, .item5 {
  height: 50px;
}

.item2, .item3, .item4 {
  height: 200px;
}

<body>
  <div >
    <div > grid Item 1 </div>
    <div >grid Item 2 </div>
    <div >grid Item 3</div>
    <div >grid Item 4</div>
    <div >grid Item 5</div>
  </div>
</body>