title: How to make the items in the last row consume remaining space in CSS Grid?
body: <p>Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are?</p>
  
  <p>I do not know the number of items that will be in the grid so I cannot target them directly. I tried to use <code>grid-auto-flow: dense</code>, but it is not really helping.</p>
  
  <p>This is my question visualized:
  <a href="https://i.stack.imgur.com/ycdnZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ycdnZ.png" alt="enter image description here"></a>: </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>div {
    margin:20px auto;
    width: 400px;
    background: #d8d8d8;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
  }
  span {
    height: 50px;
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;  
  &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>