容器未调整到页面的全宽

Question

so what I have here is a little ui I'm building. looking at my html it's pretty simple, however I have some weird behavior going on. even though page container wraps the aside and .main element, it appears to be inserting itself into the grid. I want to the .main element into the center column of the .page-container 's grid. is there something im missing?

Anything you guys got would help. thanks!

 body{ margin:0; min-height:100vh; } label{ margin:0.9em 0; } .page-container{ display:grid; width:100vw; grid-template-columns:25% 50% 25%; grid-template-rows:100%; grid-template-areas:"margin main margin"; } .main{ grid-area:main; width:100%; height:100%; background-image:url("https://live.staticflickr.com/3771/11167360764_2512d790b3_z.jpg"); } .controls{ width:25%; height:100%; position:absolute; background-color:green; font-family:sans-serif; -webkit-box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75); -moz-box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75); box-shadow: 10px 3px 5px -4px rgba(0,0,0,0.75); word-break:break-word; } .controls-wrapper{ margin:3em 5% 5% 1em; }

 <div class="page-container"> <aside class="controls"> <form class="controls-wrapper"> <label for="p_font_size">change paragraphs font size:</label> <br> <select name="" class="p_font_size"> <option value="25pt">25pt</option> <option value="11pt">11pt</option> </select> </form> </aside> <main class="main"> <p>fsdanfdjsanfsdsafdsajansan</p> </main> </div>

Answer 1

The grid-template-rows property defines the height of each row. with changing that i think you can get your desire result for example :

   .page-container{
      display:grid;
      width:100vw;
      grid-template-columns:auto auto auto;
      grid-template-rows:100% 100% 100%;
      grid-template-areas:"margin main margin";
  }

grid-template-columns:25% 50% 25% works fine too

hope i have understood you problem correctly