title: Removing grid gaps
body: <p>I have a div with elements aligned as a row, this is the css class for it:</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>.myRow {
    display: grid;
    grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="myRow"&gt;
    &lt;div style="color:blue; width: 5px;"&gt;aa&lt;/div&gt;
    &lt;div style="color:red;"&gt;bb&lt;/div&gt;
    &lt;div style="color:green;"&gt;ccc&lt;/div&gt;
    &lt;div style="color:orange;"&gt;ddd&lt;/div&gt;
    &lt;div style="color:purple;"&gt;eee&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to be able to remove the first two gaps and keep the rest of the gaps, like how <code>grid-template-columns</code> works. </p>
  
  <p><a href="https://i.stack.imgur.com/6GbeN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6GbeN.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to do this with grid? </p>
  
  <p>Edit: I want it to be like this: </p>
  
  <p><a href="https://i.stack.imgur.com/ErbBX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ErbBX.png" alt="enter image description here"></a></p>