title: css grid variable column width and wrapping
body: <p>I have what I thought was a simple task : given x items, show them in a grid, with each column being the width of the content. If the number of columns exceeds the width of the container, create a new row and continue</p>
  
  <p>I have managed to get the columns to display and wrap, but <em>only</em> if I define a fixed-width for the column</p>
  
  <p><a href="https://stackblitz.com/edit/angular4-dxkvmt" rel="noreferrer">https://stackblitz.com/edit/angular4-dxkvmt</a></p>
  
  <p>how can I make each "label" on each row fit to the content but move to a new row when the number of labels would exceed the available view space ?</p>
  
  <p>I have tried</p>
  
  <pre><code>grid-template-columns: repeat(auto-fill,max-content);
  </code></pre>
  
  <p>this gives one row per label</p>
  
  <pre><code>grid-template-columns: repeat(auto-fill,minmax(20px,max-content));
  </code></pre>
  
  <p>makes all columns 20px .. but they do flow properly on resize</p>
  
  <p>would appreciate some pointers. I am not particularly skilled at css grid so may have overlooked something easy</p>