CSSGrid_1

dh-css-grid.css

.container {
 display: grid;
 overflow-x: hidden;
}

.gridtext {
 
 font-size: 20px;
 color: white;
 text-align: center;
 padding-top: 20px;
}

.containerone {
 margin: auto;
 overflow-x: hidden;
 width: 95vw;
 height: 1200px;
 grid-template-columns: 200px 1fr 1fr;
 grid-template-rows: 1fr 2fr 2fr 1fr;
 grid-gap: 1rem;
 padding-bottom: 20px;
}
 .header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  background-image: linear-gradient(dodgerblue, midnightblue);
  
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  background-color: green;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
 background-color: skyblue;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background-color: skyblue;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background-color: skyblue;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
  background-color: skyblue;
}

dh-css-grid.html

<section id="page-1">
<div id="grids">
<div class="container containerone">
 <div class="header gridtext">header</div>
 <div class="sidebar gridtext">sidebar</div>
 <div class="content-1 gridtext">content-1</div>
 <div class="content-2 gridtext">content-2</div>
 <div class="content-3 gridtext">content-3</div>
 <div class="footer gridtext">footer</div>
</div>
 </section>
 <br>
 <section id="page-2">
 <div class="container containerone">
 <div class="header gridtext">header</div>
 <div class="sidebar gridtext">sidebar</div>
 <div class="content-1 gridtext">content-1</div>
 <div class="content-2 gridtext">content-2</div>
 <div class="content-3 gridtext">content-3</div>
 <div class="footer gridtext">footer</div>
</div>
 </section>
  <section id="page-3">
 <div class="container containerone">
 <div class="header gridtext">header</div>
 <div class="sidebar gridtext">sidebar</div>
 <div class="content-1 gridtext">content-1</div>
 <div class="content-2 gridtext">content-2</div>
 <div class="content-3 gridtext">content-3</div>
 <div class="footer gridtext">footer</div>
</div>
 </section>
  <section id="page-4">
 <div class="container containerone">
 <div class="header gridtext">header</div>
 <div class="sidebar gridtext">sidebar</div>
 <div class="content-1 gridtext">content-1</div>
 <div class="content-2 gridtext">content-2</div>
 <div class="content-3 gridtext">content-3</div>
 <div class="footer gridtext">footer</div>
</div>
 </section>

dh-css-grid.js

window.onload = (event) =>{
 const viewHeight = window.innerHeight;
 document.querySelector('.containerone').setAttribute(height: viewHeight);
}