CSS网格和网格区域分配未按预期工作[重复]

Question

所以我在开始使用新的 codepen 时遇到了问题，我声明 网格列有 6 列和。网格项（section.parameters）似乎位于此定义的网格列的外部，并为其所在的位置创建了一个附加列。

这里是网格声明和网格项的相关 css：

body{
  /*grid problems*/
  display:grid;
  grid-template-columns:25% 12.5% 12.5% 12.5% 12.5% 25%;
  grid-template-rows:1em 20em 3em 40em 15em 10em;
  grid-template-areas:". . . . . ."
                      ". . . . . ."
                      ". logo logo logo logo ."
                      ". . . . . ."
                      ". input input input input ."
                      ". . compute_button . ."
                      ". . . . . .";
}

/*the grid item*/
section.parameters{
  padding:3em;
  grid-area:input;

  background-color:grey;
  border-radius:10%;
}

idk 我已经尝试更改网格中的列数并检查定位，添加我发现的所有内容是正在创建一个额外的列，我的网格项目被放置在列的最后一行。

我会链接到 codepen，但我相信堆栈交换会尝试阻止链接到外部代码库。所以这里是一个sn-p。

body{
  padding:0;
  margin:0;
}
/*end of css resets*/
body{
  /*grid problems*/
  display:grid;
  grid-template-columns:25% 12.5% 12.5% 12.5% 12.5% 25%;
  grid-template-rows:1em 20em 3em 40em 15em 10em;
  grid-template-areas:". . . . . ."
                      ". . . . . ."
                      ". logo logo logo logo . "
                      ". . . . . . "
                      ". input input input input ."
                      ". . compute_button . .";
}

section.parameters{
  padding:3em;
  grid-area:input;
  
  background-color:grey;
  border-radius:10%;
}

triangle-computation-parameters{
  display:flex; 
  flex-align:center;
  
}

.computation-results{
    grid-area:input;
 /* transform: rotateY(180deg); */
}

.compute-button-container{
  grid-area:compute_button;
}

.compute-button{
  
  /*not displayed until grid problem is fixed*/
  display:none;
  position:relative;
  grid-area:compute-button; 
  
  height:5em;
  width:5em;
  
  top:calc(50% - 2.5em);
  left:calc(50% - 2.5em);
  
  font-family:"";
  background-color:light-grey;
  border-radius:50%;
} 

.compute-button.red{
  background-color:#C81D1D;
}

.compute-button.green{
  background-color:green;
}

.isShown{
  visability:hidden;
}

<section class="parameters"> 
  <div class="triangle-computation-parameters">
    <input type="text" placeholder="weight" class=""></input>
  </div>
  <div class="computation-results"></div>  
</section>


<div class="compute-button-container">
  <!-- add relevant aria labeling -->
  <div class="compute-button isShown red">
      
  </div>
  <div class="compute-button green">
  
  </div>
</div>

任何我可以尝试的建议或事情都将受到欢迎，谢谢；）

Answer 1

grid-template-areas有错误，最后一行只有5列。
我猜应该是：

  grid-template-areas:". . . . . ."
                      ". . . . . ."
                      ". logo logo logo logo . "
                      ". . . . . . "
                      ". input input input input ."
                      ". . compute_button compute_button . .";