title: CSS Grid generating more columns than existing
body: <p>I have a grid that for large screens (<code>@media (min-width: 800px)</code>) uses a grid of 12 columns with the next directive:</p>
  
  <pre><code>grid-template-columns: repeat(12, [col-start] 1fr);
  </code></pre>
  
  <p>But for mobile devices I use instead:</p>
  
  <pre><code>grid-template-columns: repeat(4, [col-start] 1fr);
  </code></pre>
  
  <p>Until here everything is fine, no clear problem. But if I add <code>grid-gap: 1rem;</code> the problem becomes obvious for the small screens since it seems that even though I specified 4 columns, it takes it as 12 columns 4 of them with 25% width and the rest with 0px so there is a bad behaviour of css.</p>
  
  <p>I cannot reproduce it in a JSFiddle by the moment but I have some image of the problem.</p>
  
  <p>For 12 columns on big screen:</p>
  
  <p><a href="https://i.stack.imgur.com/aCnKr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aCnKr.png" alt="Grid for 12 columns"></a>
  <a href="https://i.stack.imgur.com/Z1TQL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Z1TQL.png" alt="Computed values for 12 columns"></a></p>
  
  <p>Applied styles: (<a href="https://pastebin.com/BEqD9CJq" rel="noreferrer">Other computed values</a>) </p>
  
  <pre><code> @media (min-width: 800px) {
     .my-grid {
       display: grid;
       padding: 2.5rem 4.875rem 0 4.875rem;
       grid-template-columns: repeat(12,[col-start] 1fr);
     }
   }
  </code></pre>
  
  <p>For 4 columns:
  <a href="https://i.stack.imgur.com/X1ugM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/X1ugM.png" alt="Not good 4 columns"></a>
  <a href="https://i.stack.imgur.com/BmgaM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BmgaM.png" alt="computed values"></a></p>
  
  <p>Applied styles: (<a href="https://pastebin.com/AYhhea7C" rel="noreferrer">Other computed values</a>)</p>
  
  <pre><code>   .my-grid {
       display: grid;
       grid-template-columns: repeat(4,[col-start] 1fr);
       padding: 1rem;
     }
  </code></pre>
  
  <p>As you can see the computed values for the 4 columns grid has 4 columns set and the rest with 0px width...</p>
  
  <p>In the element inspection there are only the lines I wrote above.</p>
  
  <p>Any idea of why do we have this behaviour?</p>
  
  <p>On an additional note, I am using styled-components and it is a div.</p>
  
  <p><a href="https://codepen.io/anon/pen/gqzYze" rel="noreferrer">Codepen with the error</a> </p>