<body>
  <div class="container">
    <div class="pink"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</body>
.container {
  width: 480px;
  height: 290px;
 
  display: grid;
  grid-template-columns: 300px 180px;
  grid-template-rows: 90px 1fr 1fr;
  -ms-display: grid;
  -ms-grid-columns: 300px 180px;
  -ms-grid-rows: 90px 1fr 1fr;
}
 
.pink {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  -ms-grid-columns: 1;
  -ms-grid-rows: 1;
  background-color: #ea68a2;
}
 
.blue {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  -ms-grid-columns: 1;
  -ms-grid-rows: 2;
  background-color: #00b7ee;
}
 
.green {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  -ms-grid-columns: 2;
  -ms-grid-rows: 2;
  background-color: #80c269;
}
 
.yellow {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  -ms-grid-columns: 2;
  -ms-grid-rows: 3;
  background-color: #fff45c;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.