<div class="grid-container">
  <div class="grid-item keyImage-item">keyImage area</div>
  <div class="grid-item side-item">side area</div>
  <div class="grid-item bread-item">bread area</div>
  <div class="grid-item main-item">main area</div>
  <div class="grid-item sub1-item">sub1 area</div>
  <div class="grid-item foot-item">foot area</div>
  <div class="grid-item copyright-item">copyright area</div>
</div>
.grid-container{
  display: grid;
  margin: 30px auto;
  grid-template-areas:
    "keyImage keyImage keyImage"
    "side bread bread"
    "side main sub1"
    "side foot foot"
    "copyright copyright copyright"
  ;
  width: 600px;
  grid-template-rows: 100px 40px 300px 100px 50px;
  grid-template-columns: .3fr 2fr .3fr;
  background-color: #ddd;
}
.grid-item{
  padding: 10px 5px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #222;
  margin: 0 -1px -1px 0;
}
.keyImage-item{
  grid-area: keyImage;
}
.side-item{
  grid-area: side;
}
.bread-item{
  grid-area: bread;
}
.main-item{
  grid-area: main;
}
.sub1-item{
  grid-area: sub1;
}
.foot-item{
  grid-area: foot;
}
.copyright-item{
  grid-area: copyright;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.