<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: ;
    grid-column: ;
      background-color: blue;

}
.e{
    grid-row: ;
    grid-column: ;
}
.f{
    grid-row: ;
    grid-column: ;
}
.g{
    grid-row: ;
    grid-column: ;
      background-color: yellow;

}