title: grid-template-columns that bleed to the edge but are clamped in size
body: <p>I'm wondering if it's possible to create a grid with a <strong>variable and unknown amount of cells</strong> such that:</p>
  <ul>
  <li>The size of each cell is between MINIMUM and MAXIMUM size (lets say 200px and 500px) AND</li>
  <li>The cells always expand all the way to edge of the container</li>
  </ul>
  <p><a href="https://codesandbox.io/s/grid-auto-fit-jqp7w" rel="nofollow noreferrer">https://codesandbox.io/s/grid-auto-fit-jqp7w</a></p>
  <p>If you do</p>
  <pre><code>    gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,
  </code></pre>
  <p>the cells will always fill up to the edge of the container correctly, but if you only have one cell, it can potentially be very large.</p>
  <p><a href="https://i.stack.imgur.com/6n1Yv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6n1Yv.png" alt="enter image description here" /></a></p>
  <p>If you do</p>
  <pre><code>  gridTemplateColumns: `repeat(auto-fit, minmax(200px, 500px))`,
  </code></pre>
  <p>the grid cells will wrap rather than decrease their size to fit</p>
  <p><a href="https://i.stack.imgur.com/lJA9q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lJA9q.png" alt="enter image description here" /></a></p>