带有动态高度列的灵活的多列布局

Question

我有6个可扩展框，它们的行为如下：

1. 灵活的布局：
   • 在移动设备上，位于6个框的单个列中
   • 在平板电脑/小型笔记本电脑上，分成2列，每列3个盒子
   • 在桌面上，分为3列，每列2个框
2. 一列中的框之间是否没有空格，无论是否展开了一个或多个框

所需（桌面）

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.list {
    width: 100%;  //changed with media queries to allow multiple columns
}

<div class="container">
    <div class="list">
        <h2>Clickable Heading</h2>
        <ul class="hidden">
            <!-- List items -->
        </ul>
    </div>
        
    <!-- 5 more of DIV.list -->
    
</div>

我尝试过的事情

使用Flexbox可以很容易地实现目标＃1，但是问题是flex的方向是行而不是列，因此，当展开第1行的框时，第2行的ALL将向下移动，包括其他列的框。这违反了目标2。

错误

将flex-direction更改为column即可轻松实现目标＃2，但是如果不为容器指定固定高度，就无法将框包装成额外的列当高度取决于一个或多个盒子是否展开时完成。

将各个盒子包装到容器中的 中，然后将这些DIV的flex-wrap更改为column，显然是可行的……但仅适用于单个布局。我必须将每个包装盒重新包装成每个布局的DIV，这完全抵消了Flexbox的重要性。

有什么办法可以实现我的目标？