<div class="header">The header</div>
<div class="footer">The footer</div>
<div class="left-panel">The left panel</div>
<div class="main">The main content area</div>
<div class="right-panel">The right panel</div>
div { 
  outline: 1px solid red; 
}

body {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto 200px auto;
  grid-template-areas: 
    "header header header"
    "left   middle right"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.main {
  grid-area: middle;
}

.left-panel {
  grid-area: left;
}

.right-panel {
  grid-area: right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.