title: CSS to display no-wrap DIVs in a grid with automatic number of columns
body: <p>Say, if I want to display a group of non-wrapping <code>div</code>'s in a grid, all aligned to the left, so that the number of columns is determined automatically based on the browser's window width.</p>
  
  <p>Can I do it with CSS?</p>
  
  <p>Here's a sketch to show this:</p>
  
  <p><a href="https://i.stack.imgur.com/8rXI6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rXI6.png" alt="enter image description here"></a></p>
  
  <p>I was able to find the following <code>grid</code> CSS property, but the issue is that it wants me to specify minimum width of an individual cell, or <code>8em</code> in my example below, which defeats the purpose, as I don't know how wide each cell is.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="cell"&gt; ...&lt;/div&gt;
    &lt;div class="cell"&gt; .......... &lt;/div&gt;
    ...
    &lt;div class="cell"&gt; ..... &lt;/div&gt;
  &lt;/div&gt;
  
  
  .container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  }
  
  .cell{
    display: inline-block;
    margin: 1px 0.5em 1px 0;
    white-space: nowrap;
  }
  </code></pre>