CSS grid and grid area assignment not working as intended

Question

so I've been having a problem with a new codepen that I started, I declared the grid columns with 6 columns and. the grid item(section.parameters) seems to be sitting on the outside of this defined grid columns, and creating an addition column for where it sits.

here is the relevant css for the grid declaration and the grid items:

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 what to do i've tried changing the amount of columns in the grid and inspecting the positioning, add all I've come to find is that there is an additional column being created, where my grid item is being placed on the last row of the column.

I would link to the codepen, but i believe stack exchange tries to block linking to external code bases. so here is a snippet instead.

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>

any suggests or things that I might be able to try would be very welcomed, thanks;)

score 2 · Accepted Answer · answered Aug 13 '18 at 16:03

2

There is an error in grid-template-areas, the last row only has 5 columns.
I'm guessing it should be:

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

answered Aug 13 '18 at 16:03

barro32

2,559
23
36

man you found it! and such a silly little mistake too, can't believe that slowed me down for a whole day, bless! – Leviathan_the_Great Aug 13 '18 at 16:55

CSS grid and grid area assignment not working as intended

1 Answers1