<div class="wrapper">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
        <div class="d">D</div>
        <div class="e">E</div>
        <div class="f">F</div>
        <div class="g">G</div>
    </div>

.wrapper{
    width: 600px;
    height: 600px;
    background-color: #000;
    grid-gap: 10px;
    display: grid;
}
div{
    border: 1px solid black;
    background-color: white;

    text-align: center;
    font-weight:bold
}
.a{
    grid-row: 1/2;
    grid-column: 1/2;
}
.b{
    grid-row: 2/3;
    grid-column: 1/2;
}
.c{
    grid-row: 1/3;
    grid-column: 2/4;
    background-color: red;
}
.d{
    grid-row: 3/5;
    grid-column: 1/2;
      background-color: blue;

}
.e{
	grid-row: 3/5;
	grid-column: 2/3;
}
.f{
	grid-row: 3/4;
	grid-column: 3/4;
}
.g{
	grid-row: 4/5;
	grid-column: 3/4;
  background-color: yellow;
}