title: Pure CSS solution for splitting items into a dynamic amount of columns
body: <p>Is there a way to align items in several columns, where the number of columns depends on the widest item? Both the item height and the container width are fixed, but the item width is dynamic.</p>
  
  <p>I am looking for a CSS-only way to achieve the following behavior:</p>
  
  <blockquote>
    <p><em>(Assume that the parent container is 300px wide.)</em></p>
    
    <ul>
    <li>If the widest item is wider than 150px, use a single column</li>
    <li>If the widest item is between 100px and 150px, use two columns</li>
    <li>If the widest item is less than 100px, use three columns</li>
    <li>...</li>
    <li>If the widest item is less than container width / N, use N columns</li>
    </ul>
  </blockquote>
  
  <p>One possible way to have this behavior could be by using <code>display:inline-block</code> and setting <code>width</code> property to the width of the widest element in the container using JavaScript.</p>
  
  <p>See <a href="https://jsfiddle.net/xnu17xns/1/" rel="noreferrer">this JSFiddle</a> for an example:</p>
  
  <p><a href="https://i.stack.imgur.com/59wG2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/59wG2.png" alt="Example"></a></p>
  
  <p>However, I am thinking that there should also be a CSS-only way of doing this. Is it possible?</p>
  
  <p>If not, perhaps there is an elegant CSS-only way of distributing / snapping the dynamically-sized items to the columns in a container with a fixed width?</p>