title: How can I force this CSS grid to wrap to a new line without specifying minmax sizes?
body: <p>I come from a heavy div/float background to build responsive sites (e.g. Bootstrap 3, Foundation) and used Flex box briefly but have been attempting to use Grid everywhere since it's been really great at solving a number of problems. I seem to run into "simple" problems like this all too often and feel like I'm missing some basics, and can't find the answer in docs. Anyways, to the code.</p>
  
  <p>Given a grid setup like so:</p>
  
  <pre><code>display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  </code></pre>
  
  <p>the content doesn't wrap to a new row once it's filled the width of its parent element. Ideally, I'd be able to have it auto-wrap without pre-defining exact pixel measurements such as <code>grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));</code>. This doesn't seem to work for my needs – I'd have to define multiple <code>grid-template-columns</code> measurements for different viewports, and know what a good width is for the items inside the columns. I'd much rather say <code>grid-auto-columns: max-content;</code> and then have items simply wrap to a new line. </p>
  
  <p>Is this possible with grid? What am I missing/misunderstanding?</p>
  
  <p>See Codepen with a full example demonstrating the problem: <a href="https://codepen.io/csdv/pen/OrbrzJ" rel="noreferrer">https://codepen.io/csdv/pen/OrbrzJ</a></p>