Развертывание сетки

Question

Я хочу создать систему сетки только с CSS, чтобы

1. Сетка могла иметь произвольную высоту (одинаковую ширину), а когда сетка переполняется, она укладывается вертикально и под первой сеткой.предыдущий ряд, независимо от высоты других сеток.
2. Когда окно достигает определенного размера, система сетки разрушается и складывается только вертикально.

После поискаНекоторое время я нашел решение для моего первого требования с использованием макета flexboxТем не менее, я просто не могу понять, как заставить их складываться вертикально после их свертывания, так как в моем решении d1 и d4 являются частью одного столбца, что делает их рядом друг с другом.Есть мысли по этому поводу?

Редактировать: Мой код в основном это

#container {
  background-color: #aaa;
  margin: 0 auto;
  height: 500px;
  width: 200px;
  display: flex;
}

.box {
  background-color: white;
  border: 1px solid black;
  margin: 2%;
  width: 94%;
  display: block;
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  width: 33%;
}

<div id='container'>
  <div class="column">
    <div class='box' style="height:70px; background-color: red;">1</div>
    <div class='box' style="height:86px; background-color: orange;">4</div>
  </div>
  <div class="column">
    <div class='box' style="height:130px; background-color: grey;">2</div>
    <div class='box' style="height:110px; background-color: green;">5</div>
  </div>
  <div class="column">
    <div class='box' style="height:90px;">3</div>
    <div class='box' style="height:40px;">6</div>
  </div>
</div>

Answer 1

Попробуйте изучить медиазапрос https://www.w3schools.com/css/css_rwd_mediaqueries.asp. Это может помочь вам сложить их вертикально, когда вы достигли определенной ширины.