为什么我的CSS网格区域行为不正常？

问题描述

所以我在另一个工作正常的CSS网格内设置CSS网格时遇到麻烦。除了在每个元素上调用的网格行和网格列之外，第一个（外部）CSS网格还定义有网格模板列和行。

困难的部分是我想在将来的子网格中重用我在第一个子网格中使用的许多元素，但是布局会有所不同。这就是为什么我决定使用网格区域调用的原因。这是我的代码中引起问题的部分：

imagecolorat()

.wrapperFour {
  height: 900vh;
  background-color: tan;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(9,100vh);
}

.wrapperFour>div {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iPhone {
  grid-area: iPhone;
  height: 77.4074vh;
}

.featureLogo {
  grid-area: featureIcon;
  height: 116px;
}

.featureInfo {
  color: #4F4F4F;
}

.feature_header {
  grid-area: featureHeader;
  font-family: montserrat_bold;
  font-style: normal;
  font-weight: normal;
  font-size: 55px;
  line-height: 66px;
}

.feature_infotext {
  grid-area: featureInfotext;
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: 300;
  font-size: 35px;
  line-height: 42px;
  margin-top: 40px;
}

.feature_cta {
  grid-area: featureCTA;
  height: 80px;
  width: 400px;
  background-color: #2F60A2;
  color: #FFFFFF;
}

.feature_cta_text {
  font-family: montserrat_regular;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 42px;
}

.feature_left {
  display: grid;
  grid-template-columns: 13.85vw 21vw 7.81vw 43.49vw 13.85vw;
  grid-template-rows: 11.2vh 11.38vh 9.54vh 27.5252vh 16.66vh 12.3148vh 11.38vh;
  grid-template-areas: ".      .           .       .                   ." ".      iPhone      .       featureIcon         ." ".      iPhone      .       featureHeader       ." ".      iPhone      .       featureInfotext     ." ".      iPhone      .       featureCTA          ." ".      iPhone      .       .                   ." ".      .           .       .                   .";
  background-color: white;
}

.featureOne {
  background-color: rgb(31,141,155);
  grid-column: 1;
  grid-row: 1;
}

.featureTwo {
  background-color: rgb(126,31,155);
  grid-column: 1;
  grid-row: 2;
}

.featureThree {
  background-color: rgb(103,119,148);
  grid-column: 1;
  grid-row: 3;
}

问题在于只有iPhone图像在正确的网格区域中移动。其余的仅停留在左侧，因此第一列。我在做什么错了？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-grid html