title: Css grid rows with even items
body: <p>I have a row with 6 items. Depending on the width it will break the items into new rows.</p>
  
  <p><strong>The problem is that this can happend (asterix is an item):</strong></p>
  
  <pre><code>*****
  *
  </code></pre>
  
  <p>When I resize the screen I want it to adapt like below:</p>
  
  <pre><code>******
  </code></pre>
  
  <pre><code>***
  ***
  </code></pre>
  
  <pre><code>**
  **
  **
  </code></pre>
  
  <pre><code>*
  *
  *
  *
  *
  *
  </code></pre>
  
  <p>I know I can use media queries for this but I hope there is some other solution. Is there?</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 {
    background: #eee;
    max-width: 600px;
  }
  section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, auto));
    grid-gap: 1rem;
  }
  
  div {
    background: #ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;section&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
      &lt;div&gt;Item&lt;/div&gt;
    &lt;/section&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>