<div id="container"> <!-- container -->
  <div id="itemA">A</div> <!-- item -->
  <div id="itemB">B</div> <!-- item -->
  <div id="itemC">C</div> <!-- item -->
  <div id="itemD">D</div> <!-- item -->
  <div id="itemE">E</div> <!-- item -->
  <div id="itemF">F</div> <!-- item -->
  <div id="itemG">G</div> <!-- item -->
  <div id="itemZ" class="angle"> <!-- item container -->
    <div id="itemZ1">Z1</div> <!-- item -->
    <div id="itemZ2">Z2</div> <!-- item -->
    <div id="itemZ3">Z3</div> <!-- item -->
  </div> <!-- item -->
</div>

#container {
  display: grid;
  grid-template-rows: 20px 100px 400px;
  grid-template-columns: 2% 50% 30% 16% 2%;
}
#itemA {
  grid-row: 1 / 4;
  grid-column: 1 / 2;
  background: tomato;
  color: #fff;
}
#itemB {
  grid-row: 1 / 2;
  grid-column: 2 / 5;
  background: darkseagreen;
  color: #fff;
}
#itemC {
  grid-row: 2 / 3;
  grid-column: 2 / 5;
  background: lightblue;
  color: #fff;
}
#itemD {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background: gray;
  color: #fff;
}
#itemE {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background: #fecb2f;
  color: #fff;
}
#itemF {
  grid-row: 1 / 4;
  grid-column: 5 / 6;
  background: tomato;
  color: #fff;
}
#itemG {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
  background: lightslategray;
  color: #fff;
}
#itemZ {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  background: #fecb2f;
  color: #fff;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
#itemZ1 {
  grid-row: 1;
  grid-column: 1 / 2;
  background: turquoise;
  color: #fff;
}
#itemZ2 {
  grid-row: 1;
  grid-column: 2 / 3;
  background: #FFF;
  color: #333;
}
#itemZ3 {
  grid-row: 1;
  grid-column: 3 / 4;
  background: seagreen;
  color: #fff;
}
.angle {
  transform: rotate(-9deg);
}