问题（"我如何在HTML CSS中制作响应式网格布局"）的答案是这样的：

.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>

就像图像中那样

.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>

彼此正下方的场1 - 5以当前宽度居中
一个二个一个一个