title: CSS Grids. Different gap between each grid
body: <p>I am trying to apply different gap between each grid element, for example we are having the following code. 4 Grid lines, 3 Elements and a 10px width between each grid-box. How can i apply custom width between each grid-box? for example 20px between element1 and element2, and then 30px between element2 and element3?</p>
  
  <p>Can i achieve that with the css grids?</p>
  
  <p>Edit: Without using padding.
  Edit2: Provided Pictre.</p>
  
  <p><a href="https://i.stack.imgur.com/8HqYG.jpg" rel="noreferrer">Click for picture preview</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>html, body {height: 100%; margin: 0; padding: 0;}
  body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-row: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
   
  }
  #element1 {
  grid-column: 1/2;
  grid-row: 1/2; 
  border: 1px solid #2e2e2e;
  color: #000;
  }
  
  #element2 {
  grid-column: 2/3;
  grid-row: 1/2; 
  border: 1px solid #2e2e2e;
  color: #000;
  }
  
  #element3 {
  grid-column: 3/4;
  grid-row: 1/2; 
  border: 1px solid #2e2e2e;
  color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="element1"&gt;element1&lt;/div&gt;
  &lt;div id="element2"&gt;element2&lt;/div&gt;
  &lt;div id="element3"&gt;element3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>