JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content_img_photo">
   <div class="photo__item" style="grid-area: a;">a</div>
   <div class="photo__item" style="grid-area: b;">b</div>
   <div class="photo__item" style="grid-area: c;">c</div>
   <div class="photo__item" style="grid-area: d;">d</div>
   <div class="photo__item" style="grid-area: e;">e</div>
   <div class="photo__item" style="grid-area: f;">f</div>
</div>

CSS

.content_img_photo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
    grid-template-areas: 
    "a a b c"
    "d e e f";
}
.photo__item {
    min-width: 250px;
    height:150px;
    background-color: #F2BE22;
}