#grid3 {
display: grid;
background-color: rgb(17, 241, 9);
width: 80%;
margin: 150px auto;
height: auto;
min-height: 300px;
grid-template-columns: repeat(4, 20%);
grid-template-rows: repeat(2, minmax(100px auto));
padding: 15px;
grid-gap: 20px 10px;
justify-content: center;
grid-template-areas: " . h h h h h h ." "a a . d d . l l " " . w w w w w w . ";
}
#grid3>div {
background-color: rgb(219, 35, 35);
}
#box1{
grid-area:h ;
}
#box2{
grid-area: a;
}
#box3{
grid-area: d;
}
#box4{
grid-area:l ;
}
#box5{
grid-area: w;
}
<div id="grid3">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</div>
