<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: rgb(233,30,99); */
    background-color: #000;
    grid-gap: 30px 20px;
    /* top-bootom  left-right */
    grid-template-rows: 170px 210px 61px 61px;
    grid-template-columns: 124px 376px 42px;
    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;

}