title: Grid layout - fixed column width and responsive grid-gap
body: <p>I have a layout that fills up the whole horizontal space and the items in the last row are still the same width as other rows thanks to grid layout.</p>
  
  <p>Right now when resizing screen the width of items changes so that the whole row is filled. Is it possible to have the items fixed in width and have the grid-gaps be the ones that adjust?</p>
  
  <p><a href="https://jsfiddle.net/c60ymrfu/" rel="nofollow noreferrer">https://jsfiddle.net/c60ymrfu/</a></p>
  
  <p>Current CSS:</p>
  
  <pre><code>.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 20px;
    grid-gap: 5px;
  }
  </code></pre>
  
  <p>Current behavior:
  <a href="https://i.stack.imgur.com/GOKMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GOKMW.png" alt="enter image description here"></a></p>
  
  <p>Desired behavior:
  <a href="https://i.stack.imgur.com/DW80j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DW80j.png" alt="enter image description here"></a></p>