How can i fix width of css grid of second row second column and other columns

Question

How can i fix width of css grid of second row second column and panel-one & panel-two

Please suggest.

body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

body {
  display: grid;
  grid-template-areas:
  "nav header header header"
  "nav tasks common-control common-control"
  "nav tasks panel-one panel-two";
  grid-template-columns: 60px 350px 1fr 1fr;
  grid-template-rows: 65px auto auto;
  grid-gap: 1px;
  background-color: #2196F3;
  padding: 1px;
}

.header {grid-area: header}
.nav {grid-area: nav}
.tasks {grid-area: tasks}
.common-control {grid-area: common-control}
.panel-one {grid-area: panel-one}
.panel-two {grid-area: panel-two}

div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
}

.task {
  overflow-y: auto;
  grid-area: tasks / tasks / tasks / tasks;
}

.common-control {
  height: 100px;
  grid-area: common-control / common-control / common-control / common-control;
}

.panel-one {
  grid-area: panel-one / panel-one / panel-one / panel-one;
}

.panel-two {
  grid-area: panel-two / panel-two / panel-two / panel-two;
}

<div class="header">Header</div>
<div class="nav">nav</div>
<div class="task"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>  
<div class="common-control">common-control this should be fixed height</div>
<div class="panel-one">panel-one this should stretch till top</div>
<div class="panel-two">panel-two this should stretch till top hiding the blue space </div>

Answer 1

Use 1fr instead of auto for the third value of grid-template-rows:

body {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

body {
  display: grid;
  grid-template-areas:
  "nav header header header"
  "nav tasks common-control common-control"
  "nav tasks panel-one panel-two";
  grid-template-columns: 60px 350px 1fr 1fr;
  grid-template-rows: 65px auto 1fr; /*modified*/
  grid-gap: 1px;
  background-color: #2196F3;
  padding: 1px;
}

.header {grid-area: header}
.nav {grid-area: nav}
.tasks {grid-area: tasks}
.common-control {grid-area: common-control}
.panel-one {grid-area: panel-one}
.panel-two {grid-area: panel-two}

div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
}

.task {
  overflow-y: auto;
  grid-area: tasks / tasks / tasks / tasks;
}

.common-control {
  height: 100px;
  grid-area: common-control / common-control / common-control / common-control;
}

.panel-one {
  grid-area: panel-one / panel-one / panel-one / panel-one;
}

.panel-two {
  grid-area: panel-two / panel-two / panel-two / panel-two;
}

<div class="header">Header</div>
<div class="nav">nav</div>
<div class="task"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>  
<div class="common-control">common-control this should be fixed height</div>
<div class="panel-one">panel-one this should stretch till top</div>
<div class="panel-two">panel-two this should stretch till top hiding the blue space </div>

Fr's or fractional units represent a fraction of the available space in the grid container. 1fr makes sure that elements or grid-items placed on that row take the maximum available space, which in this case reflects in height.