我的第一个 CSS 网格区域代码似乎不起作用，它会选择它想要工作的地方？

Question

所以我有一个名为 header 的网格区域，侧边栏、内容和侧边栏和内容彼此相邻并在下面定义，侧边栏有效但内容 doesnt.how 我可以让内容看起来像侧边栏。下面的图片 link 让我的问题更清楚

.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 class="gridcont">
    <div class=" item1 item"> grid Item 1 </div>
    <div class=" item2 item">grid Item 2 </div>
    <div class=" item3 item">grid Item 3</div>
    <div class=" item4 item">grid Item 4</div>
    <div class=" item5 item">grid Item 5</div>

  </div>
</body>

请注意，我将第 3 项留空，因为如果我向其分配内容，它会破坏整个内容。这是我运行时的样子 https://i.stack.imgur.com/mW93D.png 我希望我的结果看起来像：-

Answer 1

你快到了。我添加了一个 width: 479px margin: 15px auto 使其居中并删除了 column-gap 仅留下 grid-gap: 30px; 因为行和 column-gap 在提供的图像上非常相似。已更新 grid-template-area: "header header" "sidebar content1" "content2 content2" "footer footer"

至于项目....item3 和 .item4 只需要它们自己的名称，因为它们是网格中的两个不同项目。item5 我将其命名为页脚。我还为它们添加了黄色以匹配图像。我还为每个网格项目添加了一些高度。

.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 class="gridcont">
    <div class=" item1 item"> grid Item 1 </div>
    <div class=" item2 item">grid Item 2 </div>
    <div class=" item3 item">grid Item 3</div>
    <div class=" item4 item">grid Item 4</div>
    <div class=" item5 item">grid Item 5</div>
  </div>
</body>

我的第一个 CSS 网格区域代码似乎不起作用，它会选择它想要工作的地方？

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

html

css

css-grid