title: Flexible multi-column layout with dynamic-height columns
body: <p>I have 6 expandable boxes that I want to behave as follows:</p>
  
  <ol>
  <li>Flexible layout:
  
  <ul>
  <li>On mobile, be in a single column of 6 boxes</li>
  <li>On tablet / small laptop, be in 2 columns of 3 boxes each</li>
  <li>On desktop, be in 3 columns of 2 boxes each</li>
  </ul></li>
  <li>Have no space between boxes in a column, whether one or more boxes are expanded or not</li>
  </ol>
  
  <p><em>DESIRED (Desktop)</em></p>
  
  <p><a href="https://i.stack.imgur.com/TTNY2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TTNY2.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
  }
  .list {
      width: 100%;  //changed with media queries to allow multiple columns
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="list"&gt;
          &lt;h2&gt;Clickable Heading&lt;/h2&gt;
          &lt;ul class="hidden"&gt;
              &lt;!-- List items --&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
          
      &lt;!-- 5 more of DIV.list --&gt;
      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>What I've tried</strong></p>
  
  <p>Achieving Goal #1 is easy with Flexbox, but the problem is that the flex direction is rows, not columns, so when a box on row 1 is expanded, ALL of row 2 moves down, including boxes in other columns. This violates Goal #2.</p>
  
  <p><em>WRONG</em></p>
  
  <p><a href="https://i.stack.imgur.com/l2iSG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l2iSG.png" alt="Flexible layout but wrong box flow"></a></p>
  
  <p>Achieving Goal #2 is easy by changing <code>flex-direction</code> to <code>column</code>, but then there's no way to wrap the boxes into extra columns without specifying a fixed height to the container, which obviously can't be done when the height is dependent on whether one or more boxes are expanded or not.</p>
  
  <p>Wrapping the individual boxes into DIVs <em>within</em> the container, and changing those DIVs' <code>flex-wrap</code> to <code>column</code>, obviously works... but only for a single layout. I'd have to re-wrap the individual boxes into DIVs for each layout, which completely negates the point of Flexbox.</p>
  
  <p>Is there any way to achieve my goal?</p>