How can I make responsive grid layout in html css - html

Question

I searched over internet and couldn't find this kind of grid layout.
"grid-template-columns" doesnt do the thing, cant do one box bigger then the others. I want 4 equal boxes and 1 box with equal height and width = square box * 2 + gridgap.
here is the image I've illustrated to make you understand what i ment.
I also tried to use display flex but I didnt get the Idea of it. Please, help me. Thanks!
Illustation of my idea

Answer 1

The answer to the question ("How can I make responsive grid layout in html css") is this:
.wrapper {
display: grid;
justify-content: center;
}
.box {
border: 2px solid #000;
width: 128px;
min-height: 128px;
justify-content: center;
margin: 10px;
display: grid;
align-items: center;
}
.box5 {
grid-column: 2/5;
max-width: 280px;
width: 100%;
}
/*for this to be visible, the screen-width has to be under 600px*/
#media (max-width: 600px) {
.box5 {
grid-column: 2/1;
}
}
<div class="wrapper">
<div class="box1 box">128x128</div>
<div class="box2 box">128x128</div>
<div class="box3 box">128x128</div>
<div class="box4 box">128x128</div>
<div class="box5 box">280x128</div>
</div>

Answer 2

Like in the image
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 180px;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
width: 10vw;
height: 10vw;
margin: 12px;
border: 1px solid black;
}
.box.big {
width: calc(20vw + 24px);
}
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box big"></div>
</div>
</div>
Fields 1-5 directly below each other are centered to the middle at the current width
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vw;
}
.box {
width: 10vw;
height: 10vw;
margin: 12px;
border: 1px solid black;
}
.box.big {
width: calc(20vw + 24px);
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box big"></div>
</div>