<div class="content">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
</div>
.content {
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  grid-template-areas: 
            "b a a"
            "b z c"
            "d d c";
}


.a {
  grid-area: a;
  background-color: red;
}

.b {
  grid-area: b;
  background-color: blue;
}

.c {
  grid-area: c;
  background-color: orange;
}

.d {
  grid-area: d;
  background-color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.