网格布局崩溃

Question

我想制作一个只有CSS的网格系统

1. 网格可以是任意高度（相同宽度），当网格溢出时，无论其他网格的高度如何，它都会垂直堆叠并位于上一行的第一个网格下方。
2. 当窗口达到一定大小时，网格系统会折叠并且只能垂直堆叠。



在寻找一段时间之后，我发现solution是我使用flexbox布局的第一个要求。但是，我只是无法弄清楚如何让它们在崩溃时垂直堆叠，因为在我的解决方案中d1和d4是同一列的一部分，使它们彼此相邻。有什么想法？

编辑：我的代码基本上是this

＆＃13;
＆＃13;
#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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

尝试学习媒体查询https://www.w3schools.com/css/css_rwd_mediaqueries.asp。它可以帮助您在达到一定宽度时垂直堆叠它们。