网格区域未按网格模板区域[重复]中的定义进行定位>> [

Question

此问题已经在这里有了答案：

grid-template-areas with ASCII art is not working
• 1个答案

因此这是处于新生状态的站点，该站点包含4列和5行。但是第2行的第一个单元格仍以第1行的第4单元格结束，我不明白为什么...请帮助。

#maincontainer {
  display: grid;
  grid-template-columns: 0.5fr 2fr 2fr 0.5fr;
  grid-template-rows: 3.5em 10em 15em 20em 5em;
  grid-template-areas:
    "bluep toptext topnav bluep"
    ". logo search ."
    "jumboimage jumboimage jumboimage jumboimage"
    ". news schedule ."
    "footer footer footer footer";
  height: 100vh;
  width: 100vw;
}

.blue {
  grid-area: bluep;
  background-color: #0080bf;
}

.toptext {
  grid-area: toptext;
  background-color: #0080bf;
  text-align: center;
  align-items: center;
}

.topnav {
  grid-area: topnav;
  background-color: #0080bf;
}


/*# sourceMappingURL=second.css.map */

<div id="maincontainer">
  <div class="blue"></div>
  <div class="toptext">Text here</div>
  <div class="topnav">Nav here</div>
  <div class="blue"></div>
</div>

请运行它，您会发现问题出在哪里。

我正在尝试构建第一行，最左边和右边应该是蓝色背景，中间左边应该有一个文本作为右边中间。但不是。它们相距甚远，并且创建了新的单元以及所有其他单元。我已经建立了许多网格，但从来没有遇到过这样的问题……那我做错了什么？我应该说我正在使用sass，所以这是编译的CSS。

因此这是处于新生状态的站点，该站点包含4列和5行。但是第2行的第一个单元格仍以第1行的单元格4结尾，我不明白为什么...请帮助。 #maincontainer ...

Answer 1

在网格模板区域中定义的区域应该是连续的。一种选择是创建两个单独的区域：