<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" class="angle"> <!-- item container -->
    <div id="itemH">H</div> <!-- item -->
    <div id="itemI">I</div> <!-- item -->
  </div> <!-- item -->
  <div id="itemF">F</div> <!-- item -->
  <div id="itemG">G</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;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns:50% 50%;
}
#itemH {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  background: red;
  color: #fff;
}
#itemI {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background: white;
  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;
}
.angle {
  transform: rotate(-9deg);
}