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，但是我相信堆栈交换会尝试阻止链接到外部代码库。所以这里是一个片段。

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 . .";

CSS网格和网格区域分配未按预期工作

1 个答案: