title: Grid child elements won't wrap despite using auto-fit/fill and explicit values
body: <p>So I'm trying to create a layout that is not functioning the way I think it should function given the CSS grid parameters.  Surely, this is a user error but I'm not sure what I'm missing.</p>
  <p>The setup is this:</p>
  <ol>
  <li>Display parent element as grid</li>
  <li>Add first child with a min value of 24rem</li>
  <li>Add second child with a fixed value of 19rem</li>
  </ol>
  <p><strong>The goal is:</strong></p>
  <ul>
  <li>When the viewport shrinks, the second child should wrap below the first child.</li>
  </ul>
  <p>Given the explicit values, I'm expecting them to wrap when the viewport shrinks.  But no matter what values or combinations I'm trying, wrapping doesn't occur. It feels like wrapping it reserved for elements that repeat with the same values such as:</p>
  <p><code>repeat(auto-fit,(200px,1fr))</code></p>
  <p>Here's the sample code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main {
    max-width:1000px; 
    background-color:skyblue; 
    margin-left:auto; 
    margin-right:auto;
  }
  
  .parent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr) 19rem);
    padding: 20px;
  }
  
  .parent .child:first-child {
    background-color: #eeeeee;
    height: 300px;
  }
  .parent .child:last-child {
    background-color: #cccccc;
   height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main"&gt;
  &lt;div class="parent"&gt;
    &lt;div class="child"&gt;first&lt;/div&gt;
    &lt;div class="child"&gt;second&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What am I missing??</p>