Question

因此这是处于新生状态的站点，该站点包含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。

Answer 1

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

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

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

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

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

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

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

一个更好的选择是使bluep区域覆盖整个列：

#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 ."
    ". logo search ."
    "jumboimage jumboimage jumboimage jumboimage"
    ". news schedule ."
    "footer footer footer footer";
  height: 100vh;
  width: 100vw;
}

.blue {
  grid-area: bluep
  grid-columns: 1 / span 4;
  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>

网格区域未按网格模板区域中的定义定位

1 个答案: