title: CSS Grid row/column gap on specific elements?
body: <p>I have created the grid below using CSS Grid and I am wondering if it's possible to have a gap only between specific elements within the grid, rather than applying a universal gap to all grid elements. Here's what I have right now:</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>body {
    margin: 40px;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col] 100px [col] 100px [col] 100px;
    grid-template-rows: [row] auto [row] auto [row] ;
    background-color: #fff;
    color: #444;
  }
  
    .box {
      background-color:#444;
      color:#fff;
      padding:20px;
      font-size:150%;
    }
      .a {
        grid-column: col / span 2;
        grid-row: row 1 / 3;
      }
      .b {
        grid-column: col 3 / span 1;
        grid-row: row ;
      }
      .c {
        grid-column: col 3 / span 1;
        grid-row: row 2 ;
      }
      .d {
        grid-column: col / span 1;
        grid-row: row 3;
      }
      .e {
        grid-column: col 2 / span 1;
        grid-row: row 3;
      }
      .f {
        grid-column: col 3 / span 1;
        grid-row: row 3;
      }
      .g {
        grid-column: col / span 1;
        grid-row: row 4;
      }
      .h {
        grid-column: col 2 / span 1;
        grid-row: row 4;
      }
      .i {
        grid-column: col 3 / span 1;
        grid-row: row 4;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="box a"&gt;A&lt;/div&gt;
    &lt;div class="box b"&gt;B&lt;/div&gt;
    &lt;div class="box c"&gt;C&lt;/div&gt;
    &lt;div class="box d"&gt;D&lt;/div&gt;
    &lt;div class="box e"&gt;E&lt;/div&gt;
    &lt;div class="box f"&gt;F&lt;/div&gt;
    &lt;div class="box g"&gt;G&lt;/div&gt;
    &lt;div class="box h"&gt;H&lt;/div&gt;
    &lt;div class="box i"&gt;I&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to remove the gap between the top 2 rows on the right side and between each cell on the rows below that. I would like to keep the cells broken up as they are now because the layout will be different on desktop. Here's a graphical representation of what I'm going for:</p>
  
  <p><a href="https://i.stack.imgur.com/IjDNx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/IjDNx.jpg" alt="enter image description here"></a></p>