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

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

CodePudding user response：

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;
  width: 280px;
}


/*for this to be visible, the screen-width has to be under 600px*/

@media (max-width: 600px) {
  .box5 {
    grid-column: 2/1;
    align-items: center;
    justify-content: center;
    display: grid;
    max-width: 128px;
    width: 100%;
  }
}

<div >
  <div >128x128</div>
  <div >128x128</div>
  <div >128x128</div>
  <div >128x128</div>
  <div >280x128</div>
</div>

CodePudding user response：

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 >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>