<div class='container'>
  
<div class='navbar'>Navbar</div>
<div class='sidebar'>Sidebar</div>
<div class='main'>Main</div>
<div class='content'>Content1</div>
<div class='content2'>Content2</div>
<div class='content3'>Content3</div>
<div class='footer'>Footer</div>

</div>
:root {
  --main-border-radius: 5px;
  --main-padding: 5px;
}
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 1.4fr  1.2fr 0.8fr;
  grid-template-areas:
    'nav nav nav nav'
    'sidebar main main main'
    'sidebar content content2 content3'
    'sidebar footer footer footer';
  grid-gap: .2rem;
  text-transform: uppercase;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-color: #004d40;
  text-align: center;
}
.navbar {
  background: rgba(50, 115, 220, 0.3);
  grid-area: nav;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}

.sidebar {
  background: rgb(127, 199, 252);
  grid-area: sidebar;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}

.main {
  background: rgb(184, 172, 252);
  grid-area: main;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}

.content {
  background: rgb(195, 178, 202);
  grid-area: content;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}
.content2 {
  background: rgb(195, 178, 202);
  grid-area: content2;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}
.content3 {
  background: rgb(195, 178, 202);
  grid-area: content3;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}

.footer {
  background: rgb(395, 98, 211);
  grid-area: footer;
  border-radius: var(--main-border-radius);
  padding: var(--main-padding);
}

@media only screen and (max-width:550px){
  .container {
    display: grid;
    grid-template-columns: 1fr;
  grid-template-rows: 0.3fr 1.4fr  2fr 0.8fr 0.8fr 0.8fr .4fr;
  grid-template-areas:
    'nav'
    'sidebar'
    'main'
    'content'
    'content2'
    'content3'
    'footer';
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.