title: Setting different lengths for grid gaps in CSS Grid
body: <p>I'm creating a layout using CSS Grids, and I want to have different space between each row. </p>
  
  <p>I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do achieve this, <code>grid-row-gap</code> only seems to take one value, which it uses for all rows.</p>
  
  <p>What I'm trying to achieve is a layout like this: </p>
  
  <p><a href="https://jsfiddle.net/8swzgk0b/1/" rel="noreferrer">https://jsfiddle.net/8swzgk0b/1/</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>.grid {
    display: grid;
    grid-template-columns: auto 25% 25%;
    grid-template-rows: auto auto auto;
    width 100%;
    margin: 20px;
    grid-column-gap: 40px;
    /* grid-row-gap: 40px 60px; */
  }
  
  div {
    background: #838383;
    height: 80px;
  }
  
  .wide {
    grid-column: 1 / span 3;
    margin-bottom: 5px;
  }
  
  .row-2 {
    background: green;
    margin-bottom: 10px;
  }
  
  .row-3 {
    background: blue;
    margin-bottom: 30px;
  }
  
  .row-4 {
    background: red;
    margin-bottom: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="wide"&gt;&lt;/div&gt;
    &lt;div class="row-2"&gt;&lt;/div&gt;
    &lt;div class="row-2"&gt;&lt;/div&gt;
    &lt;div class="row-2"&gt;&lt;/div&gt;
    &lt;div class="row-3"&gt;&lt;/div&gt;
    &lt;div class="row-3"&gt;&lt;/div&gt;
    &lt;div class="row-3"&gt;&lt;/div&gt;
    &lt;div class="row-4"&gt;&lt;/div&gt;
    &lt;div class="row-4"&gt;&lt;/div&gt;
    &lt;div class="row-4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>